리액트 라우터를 통하여 공통 레이아웃 설정하기

본 포스팅의 예시 코드는 이전 포스팅에서 사용한 코드와 연결되는 부분이 있다. 이전 포스팅을 읽고 오지 않아도 이해하는 데에는 무리가 없지만 내용의 흐름상 읽어보는 것을 추천한다.

[react router 설정하기] 포스팅 바로가기

 

여러 웹사이트나 애플리케이션을 사용한 경험자들은 자연스레 익숙한 것이 있다. 바로 Header 혹은 GNB의 개념인데, 가령 네이버 뉴스의 경우 언론사별/뉴스/정치 등 어느 메뉴를 눌러도 주소는 변하지만 헤더는 변하지 않는 것을 알 수 있다. 또한 똑같이 유지되는 게 으레 자연스러운 흐름이라고 인지한다.

 

모든 페이지마다 같은 헤더를 넣기 위하여는 여러 방법이 있을 것이다. 예를들어 페이지를 구성하는 컴포넌트들마다 헤더 컴포넌트를 import 하여 불러오는 방법, 라우터를 통하여 공통된 헤더를 보여주는 방법 등이 있다. 라우터를 통한 공통 레이아웃 구성은 헤더 컴포넌트를 한 번만 불러와도 모든 페이지에 적용시킬 수 있다는 편리함이 있다. (더불어 코드가 중복 없이 깔끔해 보인다-!)

---

먼저 공통으로 사용할 컴포넌트를 만든다. 구조/폴더명/파일명 등은 각자의 프로젝트에 맞게 설정하면 된다.

예시는 헤더로 작성하였는데, 페이지 구성에서 헤더와 메인 컴포넌트가 들어갈 부분을 임의로 작성하였다.

Header.jsx

import React from 'react';

const Header = () => {
  return (
    <div>
      <header>헤더가 될 부분</header>
      <main>페이지가 보여질 부분</main>
    </div>
  )
}

export default Header;

---

궁극적으로 가고자 하는 구조는 <페이지가 보일 부분>에 (이전 포스팅 기준) Home 컴포넌트, For You 컴포넌트를 넣어 보여주는 것인데, 이렇게 구성하기 위해서는 코드의 수정이 필요하다.

Header.jsx

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

const Header = () => {
  return (
    <div>
      <header>헤더가 될 부분</header>
      <main>
        <Outlet />
      </main>
    </div>
  )
}

export default Header;

상단 코드와의 차이를 보자면 react-router-dom에서 Outlet을 불러와 메인 컴포넌트가 보여주었으면 하는 부분에 삽입한다. 이곳에 컴포넌트를 넣어줘~라고 하는 암묵적인 약속이다.

---

이제 이 약속을 이행할 곳의 코드도 변경해야 하는데, App.js가 그 주인공이다. 방법은 간단하다. 일단 헤더 컴포넌트를 import 한 후, Routes 하위 Route에 Header 컴포넌트를 불러온다. 헤더 컴포넌트는 각 페이지마다 들어가게 되니 path를 설정해주지 않아도 된다. Header 컴포넌트 Route의 하위 Route들에는 아까 Header.jsx에 삽입했던 <Outlet /> 부분에 들어갔으면 하는 페이지가 될 컴포넌트들을 넣어주면 모든 설정이 끝난다.

이런 모양의 라우터 코드를 멋진 말로 중첩 라우팅이라고 한다.

import './App.css';
import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home/Home'
import ForYou from './pages/ForYou/ForYou'
import Header from './Layouts/Header/Header'


function App() {
  return (
    <Routes>
      <Route element={<Header />}>
        <Route path="/" element={<Home />} />
        <Route path="/foryou" element={<ForYou />} />
      </Route>
    </Routes>
  );
}

export default App;

---

 

이렇게 라우터를 왔다 갔다 하며 확인해보면 헤더 컴포넌트는 유지되고, 메인 페이지 내용들이 변경되는 것을 확인할 수 있다.