Outlet

React의 Outlet은 주로 React Router에서 사용되는 컴포넌트로, 중첩된 라우트에서 자식 라우트를 렌더링하기 위해 사용됩니다. Outlet을 사용하면 부모 컴포넌트 내에서 자식 컴포넌트를 표시할 위치를 정의할 수 있어, 중첩 라우팅 구조를 간편하게 관리할 수 있습니다.

기본 사용 예시

Outlet은 부모 라우트 컴포넌트에 배치되고, 자식 라우트가 활성화될 때 해당 위치에 렌더링됩니다.

// App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />     // / 경로에 렌더링
          <Route path="about" element={<About />} /> // /about 경로에 렌더링
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

// Layout.js
import { Outlet } from "react-router-dom";

function Layout() {
  return (
    <div>
      <h1>Welcome to My Site</h1>
      <Outlet /> {/* 자식 라우트를 렌더링하는 위치 */}
    </div>
  );
}

export default Layout;

설명

위 코드에서 Outlet은 Layout 컴포넌트 안에 있고, 현재 경로에 따라 Outlet이 <Home /> 또는 <About />을 렌더링합니다.

• "/"로 이동하면 Outlet이 <Home />을 렌더링하고,
• "/about"로 이동하면 Outlet이 <About />을 렌더링합니다.

장점

1. 코드 분리와 유지보수성 향상: 중첩 라우트를 부모와 자식 관계로 구조화하여 코드 관리가 용이해집니다.
2. 유연한 레이아웃 구성: 부모 라우트에 공통 레이아웃을 적용하고, 각 자식 컴포넌트를 동적으로 렌더링할 수 있습니다.

Outlet은 대규모 애플리케이션에서 라우트 구조를 직관적으로 구성하고 관리하기에 유용한 기능입니다.