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

Outlet의 기본 개념

Outlet이란?

• 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;

📌 설명

• path="admin"에 해당하는 부모 라우트 AdminLayout가 있습니다.
• 중복해서 쓸 Route 를 만들어 다른 Route를 감쌉니다.

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;