React 기초 (7) : react-router-dom의 Link를 활용한 네비게이터

 

react-router-dom을 이용하자.

 

npm install react-router-dom

 

다음, 초기 로딩되는 컴포넌트를 가진 페이지(보통 App.js)에 다음을 추가 합니다.

import { HashRouter, Route } from "react-router-dom";

 

활용 예는 다음과 같습니다.

function App() {
  return (
    <HashRouter>
      <Nav />
      <Route path="/" exact={true} component={About} />
      <Route path="/home" component={Home} />
    </HashRouter>
  );
}

 

주의할 점은 리액트 라우터는 해당 URL에 포함되는 것들 전부 렌더링한다는 것입니다.

예를 들어

/

/home

/home/introduction

 

이라는 3개의 path를 개설했을 때

/home은 /와 /home을 렌더링하고

/home/introduction은 /, /home, /home/introduction 모두를 렌더링합니다.

 

이를 해결하기 위해 path="/"에는 exact={true}를 입력합니다.

정확히 URL이 /인 것에만 실행이 됩니다.

 

다만 위와 같은 속성을 이용해 Composition을 만들어 사용할수도 있습니다.

exact에 대해서는 추후에 알아보도록 합시다.

 

 

---

 

그렇다면, 네비게이터를 만들어봅시다. 버튼을 누르면 해당 페이지로 이동하는 것을 말합니다.

대개 네비게이터 컴포넌트를 하나 생성 후 다른 페이지로 이동하는 경우에는 대부분 a 태그를 사용할 것입니다.

 

function Nav() {
  return (
    <div>
      <a href="/home">Home</a>
      <a href="/">About</a>
    </div>
  );
}

 

그러나 이 방법은 새로 접속할 때마다 전 페이지를 다시 로딩하기에 속도가 느리다는 단점이 있습니다. 이를 해결하기 위해서는 react-router-dom의 Link를 이용합니다.

 

href가 아니라 to를 씀에 주의합시다.

import { Link } from "react-router-dom";

function Nav() {
  return (
    <div>
      <Link to="/home">Home</Link>
      <Link to="/">About</Link>
    </div>
  );
}

 

 

본격적인 내용, 정리는 다음 포스트에 있습니다.

https://darrengwon.tistory.com/98

react-router-dom