[React] ReactRouter v6.4 + Router Provider 사용 방법

React에서 라우터를 설정 할 때 기존에는 <BrowserRouter>와 <Routes>를 사용 했으나

React Router v6.4부터 새로운 방식인 RouterProvider가 도입되어 기존 방식보다 더 선언적이고 깔끔한 코드 구조 유지에 좋아졌다.

 

그래서 나는 Router Provider를 프로젝트에 사용하여

훨씬 더 깔끔하고 편리한 방식으로 코드를 작성하고자 하였다.

 

ReactProvider?

1. React Router v6.4+ 에서 도입된 새로운 라우팅 방식

2. 기존 방식보다 더 선언적이고 깔끔한 코드 작성 가능

3. 비동기 데이터를 사전 로드 가능

4. createBrowserRouter()와 함께 사용

---

1. BrowserRouter vs fRouterProvider 비교

1) 기존 방식

기존 React Router 는 <BrowserRouter> 안에 <Routes> 와 <Route>를 정의하여 사용했다.

→ 페이지 이동 가능, 네비에기션 기능 제공

 

2) 새로운 방식

라우트를 따로 설정하고 RouterProvider로 관리가 가능하다.

→ Route를 한곳에서 설정 가능, 직관적인 코드 구조, 데이터 로딩 쉽게 관리 가능

---

2. 중첩 라우팅 → Children 을 활용하여 하위 컴포넌트 묶는 방법 

✅ const router = createBrowserRouter([ ~ ]) :  createBrowserRouter 선언 + 배열 활용하여 객체 선언

✅ <RouterProvider router={router} /> : 해당 선언한 객체 불러오기

✅ children : 공통 레이아웃을 유지하면서 자식 컴포넌트를 렌더링하고 싶은 경우 사용

→ Outlet 을 활용하여 부모 안에서 동적으로 페이지 변경 가능 → 코드 깔끔, 유지보수↑

Apps.jsx 에서의 children은 Root의 <Outlet />에 해당한다.

 

<Link /> 누를 때마다 Intro 부분만 렌더링되는 것을 볼 수 있다.

추가로 children이 있는 경우, index: true를 설정하면 맨 처음 보이는 창으로 설정할 수 있다.

---

3. Loader

✅ Loader: 페이지가 렌더링 되기 전 데이터를 미리 불러올 수 있는 기능

→ 페이지가 렌더링 되기 전 API 요청을 미리 수행하여 데이터를 가져올 수 있음

→ 페이지 이동 전 데이터를 불러오므로 UX 향상, 비동기 데이터 로딩 더 쉽게 관리 가능

데이터를 불러오고자 하는 페이지에 loader 를 넣은 뒤, 데이터를 반환해주면 된다.

페이지에서 데이터를 사용하고자 한다면 useLoaderData 를 사용하면 된다.

useLoaderData는 컴포넌트가 마운트된 후 useEffect로 데이터를 가져오는 방식보다 더 효율적이다.

 

→ loader 사용 이유

1. 서버에서 데이터 미리 가져올 수 있음

2. 컴포넌트가 렌더링 될 때 이미 데이터 준비된 상태로 useEffect 보다 빠름

3. 백엔드와 통신을 최적화하여 불필요한 요청을 줄일 수 있음

 

정리하자면

✅ useEffect : 사용자 인터랙션 후 동적인 데이터 가져올 때 유용 / 사용자 입력 후 데이터 변경

→ 사용자 인터랙션(클릭, 입력 등) 발생 후 데이터 가져올 때

→ 리얼타임 데이터 필요 시

→ 페이지 바뀌지 않아도 새로운 데이터 불러와야 하는 경우

 

✅ loader : 페이지 이동 전 데이터를 가져와 렌더링 최적화 (정적인 데이터에 유용) / 초기 데이터 로딩

→ 페이지 이동 전 데이터 미리 불러와야 하는 경우 (상세 페이지 등)

→ SSR과 함께 사용하는 경우 (서버에서 데이터 미리 받아 렌더링)

→ 페이지 이동 시 데이터 다시 불러와야 하는 경우