Outlet은 React Router에서 중첩 라우트(Nested Routes) 를 구현할 때 사용되는 컴포넌트입니다. 상위 라우트에서 공통 UI(예: 레이아웃, 네비게이션 바)를 유지하면서, 하위 라우트를 동적으로 변경할 수 있도록 도와줍니다.


Outlet의 기본 개념

Outlet이란?

Outlet이 필요한 이유

중첩 라우팅을 쉽게 구현 가능

부모 컴포넌트 안에서 자식 페이지를 동적으로 변경 가능

중복 코드 감소

공통 UI(네비게이션 바, 사이드바 등)를 여러 페이지에서 유지 가능

구조적 관리가 쉬움

관련된 페이지들을 그룹화하여 가독성과 유지보수성을 높임


Outlet 사용 방법

1. 기본적인 중첩 라우트 구조

import { BrowserRouter, Routes, Route } from "react-router-dom";
import AdminLayout from "./AdminLayout";
import Dashboard from "./Dashboard";
import Users from "./Users";
import Settings from "./Settings";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="admin" element={<AdminLayout />}>
          <Route index element={<Dashboard />} />
          <Route path="users" element={<Users />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
export default App;

📌 설명

2. 부모 레이아웃에서 Outlet 사용하기

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

function AdminLayout() {
  return (
    <div>
      <h1>Admin Panel</h1>
      <nav>
        <Link to="users">Users</Link> |
        <Link to="settings">Settings</Link>
      </nav>
      <hr />
      <Outlet /> {/* 이 위치에 하위 라우트가 렌더링됨 */}
    </div>
  );
}

export default AdminLayout;