[React] React-Router-dom으로 리액트 앱에 라우팅 만들기

 

 

 

 

📌 들어가며

리액트 라우트 패키지의 기본인 react-router-dom을 이용해 리액트 페이지에 라우팅을 만드는 방법을 알아보자.

 

 

📌 react-router-dom란

 

리액트 라우터 돔은 클라이언트에서 페이지 라우팅을 가능하게 한다.

서버 사이드에서 보내지는 페이지들은 일반적으로 디렉터리에서 파일 단위로 이동하게 되는데 리액트와 같은 클라이언트 사이드 렌더링(Client-Side-Rendering)의 경우는 하나의 파일에서 화면만 변경되는 구조이기 때문에 url에서 보여지는 경로를 변경한다고 해서 화면이나 파일이 변경되지 않는다.

 

하지만 필요에 의해 (구글 등에서 검색, 딥 링크 등의 필요) url에서 페이지를 지정해주어야 하고, 유저도 그것으로 화면의 변화를 인지하는 경우도 있기 때문에 라우팅이 필요하다.

 

리액트 라우터 돔을 이용하면 브라우저가 서버에 새로운 페이지를 요청하지 않고, CSS나 JS 파일을 재평가 하지 않고 자연스러운 화면의 변화와 url의 변화를 만들어줄 수 있다.

 

 

📌 react-router-dom 사용하기

 

1. react-router-dom 설치하기

 

//npm 사용
npm install react-router-dom

//yarn 사용
yarn add react-router-dom

 

 

2. App.js 에 createBrowserRouter로 객체 만들기

 

방법이 두 가지인데 createRoutesFromElements로 브라우저 라우터를 생성(createBrowserRouter)하는 것과 객체를 이용해 바로 브라우저 라우터를 생성하는 방법이 있다.

path에 url의 경로를 입력해주고, 해당 경로에서 렌더링 될 컴포넌트를 element에 작성해준다. 이 방법은 객체나 엘리먼트 생성 방식 모두 동일하다.

import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from "react-router-dom";

// createRoutesFromElements
// 엘리먼트를 생성하고 해당 엘리먼트를 이용해서 브라우저 라우터 생성
const routerElement = createRoutesFromElements(
	<Route>
    	<Route path='/' element={<HomePage/>} />
        <Route path="/products" element={<ProductsPage />}/>
    </Route>
);
const router = createBrowserRouter(routerElement);


// createBrowserRouter 
// 객체를 이용해서 브라우저 라우터 생성
const router = createBrowserRouter({
  path: '/',
  element: <HomePage />
});

 

3. App 컴포넌트에 RouterProvider로 라우트 뿌려주기

 

위에서 만든 브라우저 라우터 'router'를 RouterProvider를 이용해 컴포넌트 전체에 뿌려준다. 이는 Context와 비슷하다. 

리액트 Context 알아보기

 

import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from "react-router-dom";

const App = () => {
	return <RouterProvider router={router}></RouterProvider>
        //return <RouterProvider router={router} />
};
export default App;

 

 

📌 출처 및 참고문서

 

리액트 라우터 돔 react-router-dom 공식 문서