TIL | React Router Dom Outlet

이번주 기업과제를 새롭게 시작하면서 역할을 분담했다.
나는 초기 레이아웃을 짜고, 광고관리 페이지를 진행하기로 했다
초기 레이아웃을 짜면서 팀원분이 알려주신 react router dom의 outlet에 대해 정리해보려고 한다!

v6에 새롭게 추가된 Outlet은 react의 children과 유사하게 작동함으로서, 레이아웃 설정을 매우 간편하게 할 수 있다.

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route path="invoices" element={<Invoices />} />
        <Route path="activity" element={<Activity />} />
      </Route>
    </Routes>
  );
}

function Layout() {
  return (
    <div>
      <GlobalNav />
      <main>
        <Outlet />
      </main>
    </div>
  );
}

이렇게 레이아웃 컴포넌트를 만들고, react-router-dom에서 Outlet 컴포넌트를 import한다. 고정할 컴포넌트들이나 스타일들을 설정해주고 routes안의 route에 레이아웃 컴포넌트로 감싸주면 그 밑의 route들은 Outlet 컴포넌트 위치에 위치하게 된다🌟