리액트 - Outlet

React Router의 Outlet 이해하기

Outlet이란?

Outlet은 React Router v6에서 도입된 컴포넌트로, 부모 라우트가 자식 라우트 엘리먼트를 렌더링할 수 있게 해주는 도구입니다. 중첩 라우팅을 구현할 때 특히 유용합니다.

Outlet의 주요 특징

• 부모 라우트의 레이아웃 내에서 자식 라우트의 컴포넌트를 렌더링할 위치를 지정할 수 있습니다
• 공통 레이아웃을 유지하면서 특정 부분만 동적으로 변경할 수 있습니다
• 코드의 재사용성을 높이고 구조를 더 깔끔하게 만들 수 있습니다

기본 사용 예제

// App.jsx
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 />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

// Layout.jsx
import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <header>
        <nav>
          <Link to="/">홈</Link>
          <Link to="/about">소개</Link>
        </nav>
      </header>

      <main>
        <Outlet /> {/* 자식 라우트가 렌더링되는 위치 */}
      </main>

      <footer>
        <p>푸터 영역입니다</p>
      </footer>
    </div>
  );
}

중첩 라우팅 예제

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import UserLayout from './UserLayout';
import Home from './Home';
import UserProfile from './UserProfile';
import UserSettings from './UserSettings';
import UserPosts from './UserPosts';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="user" element={<UserLayout />}>
            <Route index element={<UserProfile />} />
            <Route path="settings" element={<UserSettings />} />
            <Route path="posts" element={<UserPosts />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

// UserLayout.jsx
import { Outlet, Link } from 'react-router-dom';

function UserLayout() {
  return (
    <div>
      <nav>
        <Link to="/user">프로필</Link>
        <Link to="/user/settings">설정</Link>
        <Link to="/user/posts">게시물</Link>
      </nav>

      <div className="user-content">
        <Outlet /> {/* 사용자 관련 컴포넌트가 렌더링되는 위치 */}
      </div>
    </div>
  );
}

Outlet Context 활용

Outlet은 context를 통해 자식 라우트에 데이터를 전달할 수도 있습니다:

// ParentLayout.jsx
function ParentLayout() {
  const userData = {
    name: "김철수",
    role: "관리자"
  };

  return (
    <div>
      <h1>부모 레이아웃</h1>
      <Outlet context={userData} />
    </div>
  );
}

// ChildComponent.jsx
import { useOutletContext } from 'react-router-dom';

function ChildComponent() {
  const userData = useOutletContext();

  return (
    <div>
      <h2>사용자 이름: {userData.name}</h2>
      <p>역할: {userData.role}</p>
    </div>
  );
}

이러한 구조를 통해 웹 애플리케이션의 레이아웃을 효율적으로 관리하고, 코드의 재사용성을 높일 수 있습니다.