[React] Outlet으로 레이아웃 구성하기, url에 따라 다른 레이아웃 적용하기

▶Outlet으로 레이아웃 구성하기

오늘은 react-router-dom의 Outlet을 이용하여 레이아웃을 구성하는 방법에 대해 알아보려고 합니다 :)

 

🔎 Outlet ?

---

Outlet은 하위 경로 요소를 렌더링하기 위해 사용하는 기능으로

만약 Header, Main, Footer를 함께 보여주기 위해서는 Outlet을 사용하여 하위 경로도 함께 렌더링이 가능합니다.

 

→ Outlet의 역할

자식 요소 중에 있는 엘리먼트 중에서 들어온 url에 맞게 엘리먼트를 보여주고 컴포넌트를 가져옵니다.

 

❓ 그냥 화면에 띄우면 되는거 아닌가

특정 페이지들끼리만 공통적으로 보여줘야 하는 레이아웃이 있을 때는 그거에 맞게 경로를 설정해줘야 합니다.

이때 Outlet을 사용하면 편하게 레이아웃을 구성할 수 있게 됩니다.

따라서 저번에 알아보았던 createBrowserRouter의 chidren을 사용하면 더욱 쉽게 레이아웃을 구성할 수 있는데요.

코드를 통해 알아보도록 하겠습니다.

 

📌 예제 코드

우선 레이아웃으로 구성할 Header와 Footer 컴포넌트를 구성해 주고

그 컴포넌트들을 합쳐줄 파일을 하나 더 만들어 줍니다.

 

📄 layout.js 파일

import Header from "./Header/Header";
import Footer from "./Footer/Footer";
import { Outlet } from "react-router-dom";

function Layout() {
  return (
    <>
      <Header />
      <Outlet />
      {/* 
        자식 요소가 들어갈 부분에 Outlet을 작성해줍니다
      */}
      <Footer />
    </>
  )
}

 

이제 App.js에서 url에 따른 자식 요소를 작성해 주면 되는데

저는 createBrowserRouter를 통해 설정해 보겠습니다.

 

📄 routing.js 파일

import Layout from 'components/Layout';
import {createBrowserRouter} from 'react-router-dom';
import HomePage from '../pages/Home';
import TodoPage from '../pages/Todo';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children : [
      {
        path: '',
        element: <HomePage />,
      },
      {
        path: 'todo',
        element: <TodoPage />,
      },
    ],
  },
]);

export default router;

위 코드에서 라우팅을 구성하는 부분을 보게 되면

기본적으로 routing에 레이아웃을 입히는 방법입니다.

 

레이아웃이 있는 페이지도 있고 없는 페이지가 있기 때문에 레이아웃을 적절하게 배치하기 위해

라우팅을 일부로 chidren으로 배치한 것입니다.

그런데 이렇게 다 작성하고 Layout에 Outlet을 작성하지 않으면

작성한 chidren들이 보이지 않습니다.

 

따라서 Layout에 Outlet을 작성하여 url에 맞게 컴포넌트를 불러오고 보여주는 역할을 하도록 작성해 줘야 합니다.

 

마지막으로 App.js에서 RouterProvider를 설정해 주고 npm start를 해봅시다!

 

📄 App.js 파일

import { RouterProvider } from 'react-router-dom';
import router from './routing.js';

const App = () => {
  return(
    <RouterProvider router={router} />
  );
};

export default App;

실행 화면

 

📌 상황에 따른 서로 다른 레이아웃 구성해 보기

가령 예를 들어 특정 페이지에서는 다른 레이아웃이 보이도록 하고 싶을 수 있습니다.

또다른 Layout을 구성하여 자식 url에 따라 서로 다른 레이아웃이 보이도록 설정하고 실행 결과를 살펴보겠습니다.

 

📄 routing.js파일

import {createBrowserRouter} from 'react-router-dom';
import Layout from '../Layout/Main/Layout';
import SecondLayout from '../Layout/Second/SecondLayout';
import Home from '../Pages/Main/Home';
import TodoPage from '../Pages/Main/Todo';
import SecondHome from '../Pages/Second/Home';
import SecondTodoPage from '../Pages/Second/Todo';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: '',
        element: <Home />,
      },
      {
        path: 'todo',
        element: <TodoPage />,
      },
    ],
  },
  {
    path: '/second',
    element: <SecondLayout />,
    children: [
      {
        path: '',
        element: <SecondHome />,
      },
      {
        path: 'todo',
        element: <SecondTodoPage />,
      },
    ],
  },
]);
export default router;

위와 같이 두 가지 상위 컴포넌트로 서로 다른 레이아웃을 두고 각각에 맞게 보여주고 싶은 하위요소를 적용해 주었습니다.

즉 /로 시작하는 url들에 보여지는 레이아웃과

/second로 시작하는 url들에 보여지는 레이아웃을 다르게 적용해 주었습니다.

실행 결과