📚 목차
[React] React Router의 Outlet 개념과 사용법
Outlet이란?
Outlet은 React Router에서 자식 라우트를 렌더링하기 위한 자리 표시자(placeholder) 역할을 한다.
중첩 라우팅(Nested Routing)을 구현할 때 필수적으로 사용되며, 레이아웃 컴포넌트 내부에서 자식 라우트의 위치를 지정하는 데 쓰인다.
블로그 내용은 React Router 공식 문서과 프로젝트를 하면서 썼던 예시를 바탕으로 작성하였다.
기본 개념
import { Outlet } from 'react-router-dom';
export const Layout = () => {
return (
<div>
<header>공통 헤더</header>
<Outlet /> {/* 자식 라우트가 여기에 렌더링됨 */}
<footer>공통 푸터</footer>
</div>
);
};Layout은 **공통 UI (헤더/푸터)**를 담당하고,
<Outlet />은 그 내부에 현재 경로에 해당하는 자식 라우트 컴포넌트를 렌더링한다.
아래는 최근 프로젝트에서 React Router를 사용하여 중첩 라우트를 사용하는 예시이다.
import { createBrowserRouter, createRoutesFromElements, Route } from 'react-router';
import { Layout } from '@/app/layout/ui/Layout';
import HomePage from '@/pages/home';
import LoginPage from '@/pages/login';
import SignupPage from '@/pages/signup';
import MyMoments from '@/pages/myMoments';
import ProtectedRoute from '@/app/routes/ProtectedRoute';
export const router = createBrowserRouter(
createRoutesFromElements(
<Route path='/' element={<Layout />}>
<Route index element={<HomePage />} />
<Route path='signup' element={<SignupPage />} />
<Route path='login' element={<LoginPage />} />
<Route element={<ProtectedRoute />}>
<Route path='my-moments' element={<MyMoments />} />
</Route>
</Route>,
),
);위 코드에서 '/' 경로에 매칭되는 Layout 컴포넌트 내부의 <Outlet />이 HomePage, SignupPage, LoginPage, MyMoments 등의 자식 라우트들을 렌더링하게 된다.
Layout 컴포넌트의 코드를 확인해보자.
import { Outlet } from 'react-router-dom';
import { Navbar } from '@/app/layout/ui/Navbar';
export const Layout = () => {
return (
<div>
<Navbar />
<main>
<Outlet />
</main>
</div>
);
};Navbar는 모든 페이지에 공통으로 보여지는 UI이다.
main 영역에 들어가는 <Outlet />은 HomePage, LoginPage 등 현재 URL에 따라 자동으로 컴포넌트를 교체하여 렌더링한다.
Outlet은 Protected Route와도 잘 작동한다.
import { useProfileQuery } from '@/features/auth/hooks/useProfileQuery';
import React from 'react';
import { Navigate, Outlet, useLocation } from 'react-router';
import { ROUTES } from './routes';
export const ProtectedRoute: React.FC = () => {
const { data: profile, isLoading, isError } = useProfileQuery();
const location = useLocation();
if (isLoading) {
return null;
}
if (isError || !profile) {
alert('로그인 후 이용해주세요.');
return <Navigate to={ROUTES.LOGIN} state={{ from: location }} replace />;
}
return <Outlet />;
};ProtectedRoute는 로그인 상태를 확인하는 컴포넌트이며, 내부에서 <Outlet />을 사용해 인증된 사용자만 자식 페이지를 볼 수 있게 합니다.
마무리
Outlet은 React Router에서 중첩 라우팅 구조를 가능하게 하는 핵심 컴포넌트이다.
공통 레이아웃을 만들고 싶은 경우라면 반드시 <Outlet />을 이해하고 활용해야 하며, 보호된 라우트, 에러 바운더리 등과도 함께 사용 가능하다.
잘 설계된 라우팅 구조는 유지보수성과 확장성을 모두 갖춘 프론트엔드 아키텍처의 기초가 된다.