React [정보 : Link vs <a>태그]

React에서 페이지를 이동할때는 Link를 사용하는것이 좋음

Link vs <a>tag

<a>태그로 이동할 때

<a> 태그의 href로 이동하면 상태 값을 잃고 속도가 저하됩니다.(페이지를 새로 불러오기 때문)

리액트는 단일 URL을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 프레임워크입니다.
그래서 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 정보를 로드하는 애플리케이션입니다.

 

따라서 해당 이유로 페이지를 새로 불러오게 되면 앱이 지니고 있는 상태가 초기화되고, 렌더링 된 컴포넌트도 모두 사라지고 새로 렌더링을 해야 합니다. 상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 합니다.

Link 태그로 이동할 때

Link 컴포넌트는 HTML5 History API를 사용하여 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다.

(state값이 사라지지 않음)

 

ex

import React from "react";
import { Route, Link } from "react-router-dom";
import Home from "./Home";
import Mypage from "./Mypage";

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/mypage">마이페이지</Link>
        </li>
      </ul>

      <Route path="/" exact={true} component={Home} />
      <Route path="/mypage" component={Mypage} />
    </div>
  );
};
export default App;