[React] Outlet (react-router-dom v6)

1. 배경

실무하면서 왼쪽에 웬만한 모든 페이지에서 보여야하는 네비게이션을 달다가 일부 페이지에서는 네비게이션이 없어야하는 상황이 생겼다
처음에는 훅스를 이용해서 처리할까 하다가 react-router-dom에 Outlet이라는 속성을 처음봤다

2. Outlet?

특정 페이지들끼리 공통적으로 보여줘야 하는 레이아웃이 있을 때 유용하게 사용할 수 있다
예를 들어 Home, About, Profile 3개의 페이지가 있다고 가정할 때 About, Profile에만 네비게이션을 보여주어야 하는 상황이라고 가정해보자
평소였으면 About, Profile 페이지에 각각 네비게이션 컴포넌트를 달았겠지만, Outlet을 사용해서 한 번만 호출해서 사용할 수 있다

우선 Skeleton 컴포넌트를 생성해보자

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

export default function Skeleton() {
  return (
    <>
      <nav>navigation</nav>
      <Outlet>
    </>
  );
}

각 페이지 컴포넌트가 보여져야 하는 부분에 Outlet 컴포넌트를 넣었다

그러고 나서 App 컴포넌트를 아래와 같이 수정한다

import { Route, Routes } from "react-router-dom";
import Skeleton from "./Skeleton";

export default function App() {
  return (
    <Routes>
      <Route element={<Skeleton />}>
        <Route path="about" element={<About />} />
        <Route path="profile" element={<Profile />} />
      </Route>
      
      <Route path="home" element={<Home />} />
    </Routes>
  );
}

실행해보면 /about, /profile 경로로 들어가면 Skeleton 안의 Outlet 영역에 각 Route에 매칭 시켜놓은 element 들이 렌더링 되어 나타나게 된다

ref

• https://reactrouter.com/en/6.4.4/components/outlet
• https://velog.io/@velopert/react-router-v6-tutorial
• https://unho94.tistory.com/55