Outlet

중첩되는 컴포넌트가 있는 경우

• 만약 element마다 공통 컴포넌트인 Navbar, Footer을 다 추가해야 한다면 비효율적임
• react-router-dom의 Outlet기능 사용하기

Outlet

• React Router Dom의 Outlet 컴포넌트는 중첩 라우팅을 구현하는 데 매우 유용한 도구임

• Outlet은 부모 라우트 요소에서 자식 라우트 요소를 렌더링하는 데 사용됨

• 이를 통해 중첩된 UI 구조를 쉽게 구현할 수 있으며, 특히 레이아웃을 공유하는 여러 페이지에서 유용함

Outlet 주요 특징

1. 라우트 구성 : 부모 라우트와 자식 라우트를 중첩 구조로 정의
2. Outlet 배치 : 부모 컴포넌트에서 자식 컴포넌트가 렌더링될 위치에 컴포넌트 배치함
3. 컨텍스트 전달 : 필요한 경우 prop을 사용하여 자식 라우트에 컨텍스트를 전달할 수 있음

사용 예시

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

function Layout() {
  return (
    <div>
      <header>공통 헤더</header>
      <Outlet />
      <footer>공통 푸터</footer>
    </div>
  );
}

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

• Outlet은 반드시 'Routes' 컴포넌트 내부의 중첩된 라우트 구조에서 사용해야 함
• 부모 라우트가 정확히 일치할 경우, 자식 인덱스 라우트가 렌더링되거나 인덱스 라우트가 없으면 아무것도 렌더링되지 않음
• Outlet을 활용하면 코드의 재사용성을 높이고, 레이아웃 구조를 더 효율적으로 관리할 수 있음
• router 위에 있어야 함