새로운 라우터가 등장했다고? (createBrowserRouter)

들어가기 전

createBrowserRouter라는 것을 접하게 된 계기는 현재 간단한 프로젝트를 진행하던중 router처리를 할 일이 있었다. 리액트 router 처리는 BrowserRouter 밖에 모르는 내게 프론트 팀원이 loader라는 기능을 사용하면 좋을것 같다는 제의를 했다. loader는 컴포넌트가 렌더링되기 전에 데이터를 미리 불러오는 함수로 서버에서 데이터를 받아오는데 적합하고, SSR CSR 모두에게 잘 어울린다는 장점을 알려줬다. 그런데 그 loader를 사용하기 위해서 router처리를 createBrowserRouter라는 것을 사용해야한다고 한다. 본격적으로 알아보자.

 

 

createBrowserRouter 란?

React Router v6.4 이상에서 도입된 새로운 라우팅 방식이다.

기존보다 더 강력한 기능과 데이터 중심의 구조를 제공해서, 최근에 많이 쓰이는 추세다.

 

기본 용도

createBrowserRouter는 react-router-dom의 기능으로, 브라우저의 URL을 기반으로 라우팅을 설정

import {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
]);

<RouterProvider router={router} />

 

라우팅에 포함 가능한 주요 속성들

속성	설명
path	URL 설명
element	해당 경로일 때 렌더링할 컴포넌트
children	중첩 라우팅 설정
loader	해당 경로 접근 전에 데이터를 미리 로딩하는 함수
lazy	코드 분할(Code spliting)을 위한 컴포넌트 지연
action	POST 요청 등을 처리할 함수
errorElement	라우팅 오류 발생 시 보여줄 컴포넌트

 

 

주요 기능

1) loader

- 컴포넌트가 렌더링되기 전에 데이터를 미리 불러오는 함수

- 서버에서 데이터를 받아오는 데 적합하며 SSR/CSR 모두에 잘 어울림

 

특징

- aysnc 함수 가능

- React 컴포넌트 바깥에서 실행됨 (렌더링 분리)

- useLoaderData() 훅으로 로드된 데이터 접근이 가능

 

2) lazy

- 라우트를 필요할 때만 불러오는 코드 분할 기법

- 초기 로딩 속도 줄이기 위해 사용되며, React.lazy + Suspense보다 더 자연스럽게 작동

 

특징

- lazy 속성은 React.lazy와 동일하지만 라우터에서 직접 분기 가능

- 동적으로 import 할 수 있어 트래픽 최적화에 좋음

 

loader / lazy 비교

항목	loader	lazy
목적	데이터 불러오기	컴포넌트 자체를 지연 로딩
언제 실행?	라우터 진입 전	라우트 진입 시 컴포넌트 import 시점
리액트와 관계	리액트 외부에서 동작	리액트 내부에서 동작
관련 훅	useLoaderData()	Suspense

 

 

마무리

간단하게 createBrowserRouter에 대해서 알아보았다. 실제 적용 예시 코드 및 추가사항이 있을 시 이 글은 수정해보려고 한다.