1 분 소요

enter image description here

📖 React react-router-dom v6

react-router-dom이 v6로 업그레이드 되었습니다. v5의 사용법과 v6에서 달라진점을 알아보겠습니다.




📖 v5

먼저 가장 기본적으로 라우팅은 사용자가 어떠한 주소로 들어왔을때 그 주소에 해당되는 페이지를 사용자에게 보내주는 것을 라우팅, 라우터 라고 합니다.

1. BrowserRouter

BrowserRouter는 react-router-dom을 적용하고 싶은 컴포넌트의 최상위 컴포넌트에 감싸주는 wrapper컴포넌트 입니다.

import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

2. Route

먼저 import 한뒤 App에 있는 컴포넌트들을 Route컴포넌트를 감싸줍니다. Route의 path를 지정해줍니다. 사용자가 웹사이트에 아무런 path도 지정하지 않고 들어왔을때는 Home 컴포넌트를 사용자에게 보여주고 싶을때는 path="/"로 지정해줍니다.

이번에는 topics라는 url로 들어오면 Topics 컴포넌트를 사용자에게 라우팅 해주고 싶습니다 path="topics".

마지막으로 path="contact"로 들어오면 Contact 컴포넌트로 라우팅 해주고 싶다고 react-route-dom 에게 전달하였습니다.

그리고 페이지 전환 테스트를 위하여 ui를 만들어 보겠습니다. 아래 예제를 구현해보면 Home을 누르면 Home만 라우팅 됩니다. 하지만 Topics, Contact를 클릭하면 Home과 같이 구현됩니다.

`http://localhost:3000/로 들어오면 path=”/”에 걸립니다. http://localhost:3000/topics로 들어오면 path=”/topics”와 path=”/”에도 걸립니다.

import { Route } from 'react-router-dom'

function App() {
  return (
    <div>
      <h1>React Router DOM example</h1>

      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/topics">Topics</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
      <Route>
        <Home path="/"></Home>
      </Route>
      <Route>
        <Topics path="topics"></Topics>
      </Route>
      <Route>
        <Contact path="contact"></Contact>
      </Route>
    </div>
  );
}

이를 해결하려면 exact 를 사용하면 정확하게 같은 주소만을 라우팅해줍니다.즉 부분적으로 일치하는 것이 아니라 정확하게 일치하는 URL의 컴포넌트를 렌더링시키는 방법을 사용할 수 있습니다.

      <Route>
        <Home exact path="/"></Home>
      </Route>
      <Route>
        <Topics path="topics"></Topics>
      </Route>
      <Route>
        <Contact path="contact"></Contact>
      </Route>

동적 라우트라는것도 있습니다. 같은 Route의 path가 일치하는 라우트는 어디에있건 누구건 화면에 출력됩니다.

      <Route>
        <Topics path="topics"></Topics>
      </Route>
      <Route>
        <Topics path="topics"></Topics>
      </Route>

3. Switch

Switch 컴포넌트로 Route를 감싸게 되면 react-route-dom은 path와 일치하는 첫번째 컴포넌트가 발견되면 나머지 컴포넌트는 버려지게 됩니다.

즉 위에있는 Home 컴포넌트가 출력되기때문에 나머지 컴포넌트는 출력될 기회가 없게됩니다.

예제 사진과 같이 주소는 contact 이지만 맨위에 있는 Home이 출력됩니다.

<Switch>
  <Route>
    <Home path="/"></Home>
  </Route>
  <Route>
    <Topics path="topics"></Topics>
  </Route>
  <Route>
    <Contact path="contact"></Contact>
  </Route>
</Switch>;

다른 방법으로는 Home을 맨 뒤로 보내면 각각의 컴포넌트가 잘 출력됩니다.

<Switch>
  <Route>
    <Topics path="topics"></Topics>
  </Route>
  <Route>
    <Contact path="contact"></Contact>
  </Route>
    <Route>
    <Home path="/"></Home>
  </Route>
</Switch>;

4. Link

우리는 싱글 페이지 애플리케이션을 만들고 있습니다. 페이지가 리로드 되지 않고 실제 동적으로 가져오는 데이터는 코딩으로 만들거나 ajax와 같은 라이브러리를 이용하여 비동기적으로 데이터를 가져와서 페이지를 동적으로 만들어주는것이 중요합니다.

HTML의 <a> 태그와 유사한 기능을 하는 컴포넌트라고 생각하시면 이해가 쉽습니다. <a> 태그는 href 속성을 통해 이동할 경로를 지정하는 반면에 <Link> 컴포넌트는 to prop을 통해서 이동할 경로를 지정해줍니다. 실행 해보면 페이지가 바뀌지 않고 구현됩니다.

<ul>
  <li>
    <Link to="/">Home</Link>
  </li>
  <li>
    <Link to="/topics">Topics</Link>
  </li>
  <li>
    <Link to="/contact">Contact</Link>
  </li>
</ul>;




📖 v6

댓글남기기

참고

최대 1 분 소요