React Router에 대해 알아보자

Jeong·2023년 8월 9일

Memory Router Route Routes browser router react router

React Router

목록 보기

2/4

키워드

라우터란?
React Router
- Browser Router
- Route
- Memory Router

최종 목표

React에서 라우팅 처리에 대해 배워보자.

현재 목표

React Router에 대해 알아보자.

React Router란?

리액트에서 주소에 따른 컴포넌트 렌더링을 관리하기 위한 라이브러리이다.

Routes와 Route는 React Router v6부터 도입된 개념이다.

React Router 설치하기

npm i react-router-dom

Routes & Route 란?

Routes는 여러 개의 Route 컴포넌트를 그룹화하고 관리하기 위한 컴포넌트이다.

Route는 실제로 주어진 경로에 대한 컴포넌트 렌더링을 하기 위한 컴포넌트이다.

기존 코드

const pages: Record<string, React.FC> = {
	'/': HomePage,
	'/about': AboutPage,
};

export default function App({products}: {
	products: Product[];
}) {
	const path = window.location.pathname;
	const Page = pages[path] || HomePage;

	return (
		<div>
			<Header />
			<div>
				<Page />
			</div>
			<Footer />
		</div>
	);
}

React Router를 쓴 코드

import {Routes, Route} from 'react-router-dom';

import Footer from './components/Footer';
import Header from './components/Header';

import AboutPage from './pages/AboutPage';
import HomePage from './pages/HomePage';

import type Product from './types/Product';

export default function App({products}: {
	products: Product[];
}) {
	return (
		<div>
			<Header />
			<div>
				<Routes>
					<Route path='/' element={<HomePage/>}/>
					<Route path='/about' element={<AboutPage />}/>
				</Routes>
			</div>
			<Footer />
		</div>
	);
}

브라우저 환경에서는 BrowserRouter

React Router를 쓰려면 BrowserRouter를 잡아줘야 한다. BrowserRouter 역시 React Router 라이브러이에서 제공하는 컴포넌트이다.

브라우저 주소가 변경되면 해당 주소에 대응하는 뷰를 렌더링한다.

BrowserRouter 는 라우팅과 관련된 정보를 컴포넌트 트리 아래의 모든 컴포넌트에 전달하기 위해 Context를 사용한다. Context는 컴포넌트 트리를 횡단하여 데이터를 전달하는 구조를 제공한다.

// main.tsx

<BrowserRouter>
	<App products={products} />
</BrowserRouter>

테스트 환경에서는 MemoryRouter

테스트 환경에서는 BrowserRouter 를 쓰면 실패한다. 테스트 환경에서는 BrowserRouter 와 비슷한 MemoryRouter 가 있다.

BrowserRouter는 브라우저의 주소를 알 수 있지만, BrowserRouter는 브라우저가 없다. 주소를 알 수 없다. 그래서 주소를 따로 잡아줘야 한다.

import {render, screen} from '@testing-library/react';
import {MemoryRouter} from 'react-router-dom';

import App from './App';

const context = describe;

describe('App', () => {
	function renderApp(path: string) {
		render((
			<MemoryRouter initialEntries={[path]}>
				<App products={[]} />
			</MemoryRouter>
		));
	}

	context('when the current path is “/”', () => {
		it('renders the home page', () => {
			renderApp('/');

			screen.getByText(/Hello, World/);
		});
	});

	context('when the current path is “/about”', () => {
		it('renders the about page', () => {
			renderApp('/about');

			screen.getByText(/This is test/);
		});
	});
});