[React - 11] Outlet

<Outlet /> 컴포넌트는 React Router v6에서 도입된 기능입니다. 

이 컴포넌트는 중첩 라우팅 (nested routing)에서 부모 라우트 내에서 

자식 라우트 컴포넌트가 어디에 렌더링될지를 지정하는 위치를 나타냅니다.

이를 사용하면, 다른 경로에 대한 서로 다른 하위 컴포넌트를 조건부로 렌더링할 수 있습니다. 

<Outlet /> 컴포넌트가 배치된 곳에서 현재 경로와 일치하는 자식 라우트 컴포넌트가 렌더링됩니다.

사용 예시

import { BrowserRouter as Router, Route, Routes, Outlet } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    </Router>
  );
}

function Layout() {
  return (
    <div>
      <nav>
        {/* ... 네비게이션 링크 ... */}
      </nav>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

위의 예시에서 <Layout /> 컴포넌트는 상위 라우트 컴포넌트로서, <Outlet />을 포함하고 있습니다. 

이 <Outlet />은 / 경로에서는 <Home /> 컴포넌트를 렌더링하고, /about 경로에서는 <About /> 컴포넌트를 렌더링합니다.

이런 방식으로 <Outlet />을 사용하면 중첩된 라우팅을 구현하고, 

여러 페이지 또는 섹션에서 공통의 레이아웃 구성 요소를 재사용할 수 있습니다.