React_outlet으로 공통 레이아웃 컴포넌트 만들기

리액트로 블로그를 만든다고 가정하자. 그럼 상단부 헤더, 메뉴와 같이 반복적으로 랜더링해줘야 하는 경우가 있을 것이다.

즉, '공통 레이아웃 컴포넌트'가 필요한데, 이를 위해 Outlet 컴포넌트를 사용하면 된다.

import { Outlet } from 'react-router-dom';

const Layout = () => {
  return (
    <div>
      <header style={{ background: 'lightgray', padding: 16, fontSize: 24 }}>
        Header
      </header>
      <main>
        {/* JSX 사이의 children을 보여준다 */}
        <Outlet />
      </main>
    </div>
  );
};

export default Layout;

Layout이라는 컴포넌트 안에 <header>와 <main> 엘리먼트를 만들어준다. header에는 우리가 생각하는 헤더 메뉴가 들어갈 자리고, main에는 이 Layout이 속한 JSX 구문의 children이 <Outlet />을 통해 표현된다.

그리고 이 Layout 컴포넌트로 다른 컴포넌트들을 감싸줘야 한다.

import { Route, Routes } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import Profile from './pages/Profile';
import Articles from './pages/Articles';
import Article from './pages/Article';
import Layout from './Layout';

const App = () => {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/profiles/:username' element={<Profile />} />
      </Route>
      {/* Routing 중첩 */}
      <Route path='/articles' element={<Articles />}>
        <Route path='/articles/:id' element={<Article />} />
      </Route>
    </Routes>
  );
};

export default App;

 

위처럼 감싼 profiles/:username 경로의 페이지는 이와 같이 Header가 표현된다.