React Router Dom V6 : nested routes

Reac Router Dom가 V6로 업그레이드 되면서 중첩 라우팅 기능이 강화되었다.

공식 문서에서는 nested routes라고 설명하는 중첩 라우팅은 동일한 레이아웃을 공유하는 여러 페이지에 한번의 레이아웃 호출로 간단하게 레이아웃을 공유하게 해준다.

 

 

위 홈페이지는 패스트캠퍼스에서 미니프로젝트로 진행한 해커뉴스 페이지이다.

3개의 페이지를 보면 헤더와 네비게이션을 동일하게 가져가는 것을 볼 수 있다.

만약 중첩라우팅을 사용하지 않는다면 위 3개의 라우트에 모두 각각 헤더와 네비게이션을 따로 설정해줘야 할 것이다.

예시로 들어보면 아래와 같은 구조가 나올 것이다.

 

// simplify Router
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/Article" element={<Article />} />
  <Route path="/Show" element={<Show />} />
  <Route path="/Ask" element={<Ask />} />
  <Route path="/Jobs" element={<Jobs />} />
  <Route path="/:menu/:id" element={<Description />} />
  <Route
    path="*"
    element={
      <main style={{ padding: "1rem" }}>
        <p>There's nothing here!</p>
      </main>
    }
  />
</Routes>


// 1st Page
function Home() {
  return (
    <Viewport>
      <Header />
      <Nav isHome={true} />
      <TotalRank datas={totalRankDatas} />
      <List datas={articleDatas}></List>
    </Viewport>
  );
}

// 2nd Page
function Article() {
  return (
    <Viewport>
      <Header />
      <Nav />
      <List datas={articleDatas}></List>
    </Viewport>
  );
}

// 3rd Page
function Ask() {
  return (
    <Viewport>
      <Header />
      <Nav />
      <List datas={articleDatas} />
    </Viewport>
  );
}

 

위 구조는 모두 같은 Viewport, Header와 Nav 를 사용하면서 각각의 페이지에서 새로 호출을 해주고 있다.

List는 데이터를 받아야 하므로(여기서는 생략되었지만) 따로 빼서 관리를 해주는 것이 나쁘지 않을지 몰라도 다른 부분은 이렇게 사용하는 것이 효율적이지 않다.

이런 문제를 React Router Dom V6의 nested routes로 개선할 수 있다.

 

먼저 해당하는 페이지에서 같이 공유하는 컴포넌트를 가진 새로운 파일을 만들어준다.

이름은 Layout으로 지어줬다.

 

const Layout = () => {
  return (
    <Viewport>
      <Header />
      <Nav />
      {/* 하위 요소 */}
    </Viewport>
  );
};

 

이 파일을 모두 공유하는 방법으로 중첩 라우팅을 사용할 것이다.

중첩 라우팅을 사용할 때 유의해야 할 것은 <Outlet /> 이다.

아래 구조를 보고 이어서 설명하겠다.

 

// simplify Router
<Routes>
  <Route element={<Layout />}>
    <Route path="/" element={<Home />} />
    <Route path="/Article" element={<Article />} />
    <Route path="/Show" element={<Show />} />
    <Route path="/Ask" element={<Ask />} />
    <Route path="/Jobs" element={<Jobs />} />
    <Route path="/:menu/:id" element={<Description />} />
  </Route>
          
  <Route
    path="*"
    element={
      <main style={{ padding: "1rem" }}>
        <p>There's nothing here!</p>
      </main>
    }
  />
</Routes>

 

구조를 보면 Route들이 모두 <Route element={<Layout />}> 안에 들어간 모습임을 볼 수 있다.

해당라우트가 상위 라우트이고 그 안에 속한 라우트는 모두 하위 라우트가 된다.(그래서 중첩 라우팅이라고 부른다.)

따라서 상위 라우트에 path가 정해져 있지 않아도 하위 라우트에 모두 작용하게 된다.

 

따라서 하위 라우트에서 필요없어진 컴포넌트들을 제거하면 아래와 같이 변하게 된다.

 

// 1st Page
function Home() {
  return (
    <>
      <TotalRank datas={totalRankDatas} />
      <List datas={articleDatas}></List>
    </>
  );
}

// 2nd Page
function Article() {
  return (
    <List datas={articleDatas}></List>
  );
}

// 3rd Page
function Ask() {
  return (
    <List datas={articleDatas} />
  );
}

 

중첩된 코드가 많이 제거되어서 아주 깔끔하다.

하지만 이렇게만 코드를 적으면 Layout만 보이고 하위 라우트들이 보이지 않는데, 이는 상위 라우트의 어느 곳에 하위 라우트가 끼어야 하는지 정의되어 있지 않기 때문이다.

 

다시 상위 라우트의 코드를 보면

const Layout = () => {
  return (
    <Viewport>
      <Header />
      <Nav />
      {/* 하위 요소 */}
    </Viewport>
  );
};

분면 하위 라우트는 Nav의 바로 밑에 위치해야지 원래 모양과 같아질 것이다.

하지만 이를 정의해 주지 않았기 때문에 하위 라우트가 아예 렌더링 되지않는다.

 

이를 해결해주는 것이 Outlet 컴포넌트이다. 

Outlet 컴포넌트는 중첩 라우팅에서 하위 라우트가 상위 라우트에 들어갈 위치를 지정해준다.

따라서 이 경우에는 상위 라우트의 Nav밑에 Outlet을 설정해주면 된다.

 

const Layout = () => {
  return (
    <Viewport>
      <Header />
      <Nav />
      // 하위 라우트의 위치를 지정해준다.
      <Outlet /> 
    </Viewport>
  );
};

 

그럼 중첩 라우팅으로 구성된 리액트 페이지가 완성이다.