[React] Outlet 이란?

토이프로젝트 3를 진행하면서 다른 팀원이 outlet으로 라우트 처리를 해놨길래 궁금해져서 찾아봤다.

React Router의 Outlet 컴포넌트는 중첩된 라우트를 렌더링하는 데 사용한다. 즉, 부모 라우트가 자식 라우트를 포함하고 있을 때, 부모 라우트의 레이아웃이나 공통 UI 요소를 렌더링하면서, 자식 라우트의 컴포넌트를 특정 위치에 렌더링하는 역할을 한다.

주요 개념

중첩 라우팅

React Router에서 라우트를 중첩하여 정의할 수 있다. 예를 들어, /dashboard 경로 아래에 /dashboard/settings와 같은 하위 경로를 정의할 수 있다.
부모 컴포넌트는 레이아웃이나 공통 UI 요소를 렌더링하고, 자식 컴포넌트는 Outlet이 있는 위치에 렌더링된다.

Outlet의 역할

Outlet은 부모 라우트 컴포넌트에서 자식 라우트를 렌더링할 위치를 나타낸다.
부모 컴포넌트는 Outlet을 포함하여 자신의 UI를 구성하고, 자식 라우트가 매칭되면 해당 라우트의 컴포넌트가 Outlet이 있는 위치에 렌더링된다.

예시 코드

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';
import Profile from './Profile';
import Settings from './Settings';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

//Layout.tsx
function Layout() {
  return (
    <div>
      <h1>My Website</h1>
      <nav>
        <Link to="/">Home</Link>
        <Link to="profile">Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>
      <Outlet /> {/* 자식 라우트가 렌더링되는 위치 */}
    </div>
  );
}

위의 Layout 컴포넌트에서 h1과 nav는 공통요소로 모든 하위페이지에서 고정적으로 보여줘야한다. 그래서 밑에 바뀌는 요소들에 Outlet를 이용하여 자식요소들을 랜더링한다.

사용자가 / 경로에 있으면 Home 컴포넌트가 Outlet 위치에 렌더링된다.
/profile 경로에 있으면 Profile 컴포넌트가 렌더링되고, /settings 경로에 있으면 Settings 컴포넌트가 렌더링된다.