React에서 React Router와 Link를 이용하여 screen을 이동할 수 있다.

이 때, 브라우저는 새로고침 되지 않고 component만 바뀌어 rendering 되는 것이 Router의 특징이다.

하지만 screen을 이동하지 않고 다른 내용을 보여줄 때는 Router를 사용하기 애매하다.

앞선 예제를 살펴보자.

Home screen의 아래쪽에 인물 카드의 detail을 표현하고 싶은 경우 Detail screen에 Home의 내용을 모두 작성해주어야 한다. 따라서 불필요한 코드의 중복이 일어날 것이다.

따라서 Router를 screen 부분적으로도 사용할 수 있어야 할 필요성이 존재한다.

React Router에서는 Nested Router를 이용하여 문제를 해결하였다.

Nested Router

---

Nested Router 란 간단하게 Router 안에 Router가 존재하는 것이다.

<Router>
  <Routes>
    <Route path="/" element={<Home />}>
      <Route path="/detail/:id" element={<Detail />}></Route>
    </Route>
  </Routes>
</Router>

위와같이 Home screen 안에 Detail screen을 넣을 수 있다.

Link로 연결되어진 카드를 클릭하면 URL이 바뀌는 것을 확인할 수 있다. 하지만 Detail screen의 정보는 나타나지 않는다.

이 때 Outlet을 이용하여 상위 component에서 중첩된 Router가 어디에 표시될지 지정해 주면 된다.

const Home = () => {
  return (
    <div>
      <h1>This is Home Screen</h1>
      <User></User>
      <Outlet></Outlet>
    </div>
  );
};

지정한 위치에 Detail screen이 나타나는것을 확인할 수 있다.

마치며

---

Nested Router는 Single Page Application에서 다양한 정보를 표시하는 것을 가능하게 하는 매우 중요한 기능이라고 생각한다. 별도의 새로고침이나 로딩 없이 한 화면에 다양한 정보를 보여주는 것이 가장 큰 장점이다.

개발자인 친구에게 React를 TypeScript로 사용하는 것이 에러 핸들링이나 협업, 유지보수 관련 거의 모든 면에서 더 좋다고 얘기를 들었다.

typescript는 예전에 사용해 본 적이 있어 기본 개념은 알고있기 때문에 typescript로 React를 사용하는 방법에 대해 공부해봐야 겠다.