1. Intro
최근에 노마드코더 React JS 마스터클래스 강의를 수강하면서 React Router Dom v5를 사용하게 되었다. 기존 프로젝트에서 v6을 사용해 왔기 때문에 이전 버전인 v5를 사용하는 건 낯선 느낌이 강했다. v5를 굳이 사용해야하나.. 싶었으나 다운로드 수를 보니 v5가 현재까지도 꾸준히 사용되고 있었다.
v6보다 다운로드 수가 더 많다니..
그래서 이왕 v5를 사용하게 된 김에 v5로 프로젝트를 완성해 보고, v6으로 버전 업을 해볼까 한다.
우선 이번 포스팅은 React Router Dom v5 사용에 대한 기록이다.
2. 개념 정리
2.1. Routing(라우팅)
- 사용자의 요청에 따라 웹 애플리케이션에서 특정한 view(페이지)를 보여주는 것
- 라우팅을 통해 사용자는 여러 페이지 간을 이동하면서 애플리케이션의 다양한 기능 및 콘텐츠 탐색 가능
- React에서는 주로
React Router를 사용하여 라우팅을 관리함
2.2. Route(라우트)
- 특정 URL 경로에 대응되는 컴포넌트를 지정하는 규칙
- 각 라우트는 특정 경로와 연결된 컴포넌트를 렌더링
React Router에서<Route>컴포넌트를 사용하여 라우트를 정의함
2.3. Router(라우터)
- URL의 변화를 감지하고, 그에 따라 적절한 라우트를 렌더링하는 역할
React Router에서<BrowswerRouter>또는<HashRouter>등의 라우터 컴포넌트를 사용
2.4. react-router vs. react-router-dom
- React Router 라이브러리에 속하는 패키지
- 일반적으로 웹 프로젝트에서는
react-router-dom을 설치하고 사용하는 것이 일반적
2.4.1. react-router
- React Router의 핵심 기능 제공
- React Router는 웹 애플리케이션의 라우팅을 관리하는 데 사용되며,
<Route>,<Link>,<Switch>등의 기본 컴포넌트를 포함함 - React Router v6에서 사용되는 핵심 라이브러리이며, 웹 뿐만 아니라 React Native 등 다양한 환경에서도 사용 가능
2.4.2. react-router-dom
react-router를 기반으로 웹 환경에서 사용할 수 있도록 추가된 패키지- 브라우저에서의 라우팅을 담당하며,
<BrowserRouter>,<Link>,<Route>등의 웹 브라우저에서 사용하는 기능 제공 - 웹에서 라우팅을 처리할 때 사용되며, 웹 애플리케이션에서 React Router를 사용할 때 필수적
2.5. React Router를 사용하는 이유
-
SPA 지원
- SPA(Single Page Application): 페이지를 새로고침하지 않고도 동적으로 콘텐츠를 변경하고 페이지 간 전환을 허용하는 웹 애플리케이션
-
더 나은 사용자 경험
- 라우팅을 통해 사용자는 페이지 간을 손쉽게 이동 가능
- 브라우저 히스토링 API를 사용하면 뒤로 가기, 앞으로 가기와 같은 브라우저 내비게이션도 자연스럽게 지원됨
-
동적 라우팅
- URL에 매개변수를 활용한 유연한 라우팅이 가능
- 동적으로 데이터를 로딩하고 해당 내용을 렌더링
-
중첩된 라우팅
- 컴포넌트의 계층 구조를 반영하고 여러 수준의 라우팅 적용 가능
2.6. React Router 종류
2.6.1. BrowserRouter
- HTML5 History API를 기반으로 동작함
- History API를 사용하여 브라우저의 URL을 변경하고 페이지를 새로고침하지 않고도 라우팅을 처리함
- 서버 측에서 정적 파일이 아닌, 동적 페이지를 제공하는 경우에는 서버 측에서 모든 경로에 대해 앱이 제대로 로드될 수 있도록 서버 설정이 필요함
- 이를 위해 sealed path가 필요함
2.6.2. HashRouter
-
URL의 해시(
#)를 이용하여 라우팅 처리- 브라우저는 해시(
#) 뒷 부분을 서버에 요청하지 않기 때문에, 서버 측에서 별도의 설정이 필요하지 않음
- 브라우저는 해시(
-
서버에서 라우팅에 대한 추가적인 설정 없이도 동작하기 때문에 간단하게 사용 가능
3. 사용하기
3.1. 설치
v5를 사용하기 위해서 버전을 명시하여 설치했다.
npm install react-router-dom@5.3.43.2. 기본 세팅
// Router.tsx
import { BrowserRouter, Switch, Route } from "react-router-dom";
import CoinDetailPage from "./pages/CoinDetailPage";
import HomePage from "./pages/HomePage";
const Router = () => {
return (
<BrowserRouter>
<Switch>
<Route path="/:coinId">
<CoinDetailPage />
</Route>
<Route path="/">
<HomePage />
</Route>
</Switch>
</BrowserRouter>
);
};
export default Router;위의 코드와 같이 기본적인 설정을 하여 Router 컴포넌트를 생성했다.
내 경우, 페이지가 CoinDetailPage와 HomePage로 2개라서 위와 같이 코드를 작성했다.
Switch (스위치)
- 여러 라우트 중에서 맨 처음으로 매칭되는 라우트만을 렌더링하고, 나머지는 무시하는 컴포넌트
<Switch>컴포넌트를 사용하여 가장 먼저 매칭되는 라우트만 렌더링
// App.tsx
import Router from "./Router";
const App = () => (
<>
<Router />
</>
);
export default App;상위 렌더링 요소에서 Router 컴포넌트를 붙여주면 된다.
3.3. Link
- 사용자가 클릭할 수 있는 링크를 생성하는 컴포넌트
<Link>컴포넌트를 사용하여 사용자가 특정 경로로 이동할 수 있는 링크를 만듦
// Coins/index.tsx
import { Link } from "react-router-dom";
import * as style from "./styles";
const Coins = () => {
// ...
return (
<style.CoinsList>
{data?.map((coin) => (
<style.Coin key={coin.id}>
<Link
to={{
pathname: `/${coin.id}`,
state: { name: coin.name },
}}
>
{coin.name}
</Link>
</style.Coin>
))}
</style.CoinsList>
);
};
export default Coins;위의 코드의 경우, Link 컴포넌트가 각 코인에 대한 링크를 생성하고 있다.
to prop은 링크가 이동할 경로와 해당 경로로 전달할 상태를 설정한다.
pathname은 URL 경로를 나타내며, 여기에서는 /${coin.id}로 동적으로 생성된다.
state는 해당 링크로 이동할 때 함께 전달되는 state이며, 여기에서는 코인의 이름이 전달되고 있다.
3.4. useParams, useLocation
useParams와 useLocation은 라우트 매개변수 및 현재 경로에 대한 정보를 제공하는 데 사용된다. 위에서 Link 컴포넌트 내에서 to prop을 통해 생성된 동적인 경로, coinId를 useParams가 가져올 수 있다. 또한 Link 컴포넌트에서 전달한 state는 useLocation을 사용하여 가져올 수 있다.
// CoinOverview.tsx
import { useParams, useLocation } from "react-router-dom";
interface RouteParams {
coinId: string;
}
interface RouteState {
name: string;
}
const CoinOverview = () => {
const { coinId } = useParams<RouteParams>();
const { state } = useLocation<RouteState>();
// ...
}
export default CoinOverview;useParams 훅을 사용하여 현재 경로의 동적으로 생성된 매개변수를 가져왔다. coinId는 동적으로 설정된 코인 id를 나타내며, 라우트 경로에서 /:coinId에 해당하는 부분이다. 이와같이 동적으로 설정된 매개변수를 사용하면 코인 id에 따라 서로 다른 데이터를 렌더링할 수 있다.
useLocation 훅을 사용하여 현재 위치(경로)에 대한 정보를 가져왔다. 위의 코드에서는 이전 페이지인 Coins 컴포넌트에서 전달한 상태 정보를 사용하기 위해 state를 활용하고 있다.
3.5. useHistory
- 페이지 간이 이동 및 브라우저 히스토리 조작을 통해 유연하게 라우팅을 다룰 수 있는 hook
// CoinOverview/index.tsx
import { useHistory } from "react-router-dom";
import * as style from "./styles";
const CoinOverview = () => {
const history = useHistory();
const handleBackButtonClick = () => {
history.push("/");
};
return (
<>
<style.BackIcStyle onClick={handleBackButtonClick} />
</>
)
}
export default CoinOverview;위의 경우, 뒤로 가기 버튼에서 useHistory가 사용되었다.
뒤로 가기 버튼을 클릭하면 history.push("/")를 사용하여 루트 경로로 이동하도록 설정했다.
5. Reference
https://velog.io/@kandy1002/React-Router-Dom-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0#react-router-dom
