[react-router-dom v6] 전역 컴포넌트 사용과 라우팅 구조화

전역적으로 보여야 하는 컴포넌트는 어디에 import 해야 할까? react-router-dom v6 버전에서는 이전 버전과는 다른 라우팅 방식이 도입되었다. 이에 따라 Navbar 컴포넌트를 어디에서 import 해야 하는지에 대한 접근도 바뀌었다.

 

v6에서는 아래 코드와 같이 App.js에 전역 컴포넌트를 import 하면 에러가 날 것이다.

function App() {
  return (
    <>
        {/* 전역 컴포넌트 */}
        <Navbar />
        {/* 라우팅 */}
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<HomePage />} />
                <Route path="/super-heroes" element={<SuperHeroesPage />} />
            </Routes>
        </BrowserRouter>
    </>
  )
}

export default App

🚫 Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null…

🚫 The above error occurred in the component…

 

 

라우팅 구조화

react-router-dom v6에서는 라우트와 레이아웃을 분리하는 패턴을 권장한다. 따라서, Navbar와 같은 전역적인 컴포넌트를 App.js와 함께 사용하면 라우팅 관련 문제가 발생할 수 있다. 대신에 다음과 같이 컴포넌트 구조를 구조화하면 해당 문제를 해결할 수 있다.

1. Layout 컴포넌트 생성

먼저, 레이아웃 컴포넌트를 생성한다. 이 레이아웃 컴포넌트는 Navbar와 같은 전역 컴포넌트를 포함할 수 있다.

// Layout.js
import Navbar from './Nav';

const Layout = () => {
  return (
    <div>
        {/* 전역 컴포넌트 */}
        <Navbar />
    </div>
  );
};

export default Layout;

 

2. Outlet으로 하위 컴포넌트 전달하기

Layout 컴포넌트로 묶인 하위 컴포넌트를 라우팅에 따라 출력하려면 Outlet 컴포넌트를 사용하면 된다.

// Layout.js
import Navbar from './Nav';
import { Outlet } from 'react-router';

const Layout = () => {
  return (
    <div>
        {/* 전역 컴포넌트 */}
        <Navbar />
        {/* 라우팅에 따라 전달되는 하위 컴포넌트 */}
        <Outlet />
    </div>
  );
};

export default Layout;

 

3. 라우트 설정

Layout 컴포넌트로 하위 컴포넌트를 묶어주면 그 하위 컴포넌트가 위에서 설정한 Outlet컴포넌트 위치에서 출력된다. path에 따라서 각 하위 컴포넌트가 출력된다. 사실 아래와 같은 방법은 많이 사용하지 않고 두 번째 방법을 많이 사용한다.

// App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Layout><HomePage /></Layout>} />
            <Route path="/super-heroes" element={<Layout><SuperHeroesPage /></Layout>} />
        </Routes>
    </BrowserRouter>
  );
};

export default App;

 

매번 Layout 컴포넌트로 감싸는 게 번거롭다면 아래와 같이 중첩 방식으로 라우트를 설정하면 된다.

// App.js
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />} > {/* 전역 컴포넌트 */}
          <Route index element={<HomePage />} />
          <Route path="/super-heroes" element={<SuperHeroesPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

 

이렇게 하면 Layout 컴포넌트는 Routes 컴포넌트 내에서 렌더링 되며, 그 안에 페이지 컴포넌트가 중첩된다. 이 방법을 사용하면 매번 Layout 컴포넌트를 감싸지 않아도 되므로 코드가 더 간결해진다.

 

이렇게 라우팅이 구조화된 코드는 Navbar와 같은 전역 컴포넌트를 라우트와 분리하여 사용하므로, 라우팅 관련 문제가 발생하지 않게 된다.

 

 

(참고) Route의 index prop

<Route index element={<HomePage />} />

사용자가 웹사이트의 루트 경로인 /를 방문하면, Layout 컴포넌트가 렌더링 되고 동시에 index prop으로 지정된 HomePage 컴포넌트가 렌더링 된다. 이렇게 함으로써 기본 페이지를 설정할 수 있게 되는 것이다.

index prop을 사용하여 기본 페이지를 설정하면, 해당 경로에 대한 URL을 직접 입력하지 않고도 웹사이트의 기본 화면을 보여줄 수 있다. Routes 컴포넌트에서 Route 컴포넌트의 index prop은 해당 경로가 기본 페이지로 사용되는 경우에 적용된다. 즉, 해당 경로에 대한 URL이 매칭되었을 때, index prop으로 지정된 컴포넌트가 렌더링 된다.