[React] React-Router-Dom v6

kim unknown·2022년 6월 16일

React

목록 보기

3/7

리액트는 SPA 방식으로 라우팅을 구현한다.
React-Router-Dom은 리액트의 라우팅 관련 라이브러리로 현재 v6까지 발표되었다.
이전 버전인 v5와 v6는 문법적으로 차이가 있다. v6의 문법과 함께 v5에서 어떻게 바뀌었는지 정리해보겠다.

0. React-Router-Dom 설치

React-Router-Dom 버전6 설치
npm install react-router-dom@6

1. React-Router-Dom 문법

1-1. BrowserRouter

<BrowserRouter>는 페이지를 새로 불러오지 않고도 주소를 변경하고 해당 주소의 경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 해준다.
BrowserRouter는 가장 최상단에서 모든 컴포넌트를 감싼다.

1-2. Routes

<Routes>는 여러 Route중에서 경로가 일치하는 하나의 Route를 찾아 렌더링 시킨다.
Routes는 BrowserRouter 안에서 여러 Route를 감싼다.

💡 v5에서는 Switch를 사용하다가 v6부터 Routes로 변경되었다.

1-3. Route, Private Route

<Route>는 경로에 따른 각각의 컴포넌트를 보여준다.
<PrivateRoute>는 특정 조건이 충족되지 않았을 때 다른 페이지로 이동시킨다.

path 속성에는 경로를 넣고, element 속성에는 해당 경로에 접속했을 시 보여줄 컨포넌트를 넣는다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다. 해당되는 경로가 없어서 NotFound를 렌더링하고 싶은 경우 맨 마지막 라우트에 path="*"을 사용하면 된다.

<Route path="주소" element={<컴포넌트 />} />

// 사용하는 컴포넌트를 react-router-dom으로 부터 모두 import
import { BrowserRouter, Routes, Route } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/login" element={<Login />} />
    <Route path="/detail" element={<Detail />} />
    // /의 경우 우 모든 path에 매칭되므로 가장 아래로 내려서 작성
    <Route path="/" element={<Home />} />
    // 위에서부터 일치하는 경로를 찾고 없다면 NotFound 컴포넌트 렌더링
    // 위 라우트에 지정된 경로 외에 접속하는 모든 경로에 해당
    <Route path="*" element={<NotFound />} />
  </Routes>
</BrowserRouter>

💡 v5에서는 정확하게 일치하는 경로를 찾기 위해 exact 옵션을 사용하였는 데 v6에서부터 삭제되었다.
v5에서는 컴포넌트를 지정할 때 component 속성을 사용하거나 render를 사용하였는 데 v6부턴 element로 변경되었다. 또한, 중첩라우팅이 가능하다.
v5에서는 NotFound 리다이렉트시 <Redirect>를 사용하였는 데 v6부턴 path="*"를 사용한다.

1-4. Link, NavLink

<Link>는 리로드 없이 다른 페이지로 이동시키며 a 태그와 비슷한 역할을 한다.
a 태그는 페이지를 새로 불러오기 때문에 페이지를 새로 불러오는 것을 막고 주소의 경로만 바꾸는 Link 사용하는 것이다.
<NavLink>는 스타일이 추가되는 등의 기능이 있다.

to 속성에 이동할 경로를 넣어주면 리로드 없이 페이지를 이동한다.

<Link to="경로">경로명</Link>

import { Link } from 'react-router-dom';

<Link to="/">Home</Link>
<Link to="/detail">Detail</Link>

📌 URL Parameter 라우팅

1-5. useParams

useParams는 URL 파라미터의 값을 가져온다.

URL 파라미터는 :id 형태로 경로에 유동적인 값을 넣는다.
<Route path="/endpoint/:id" />

1-6. useNavigate

useNavigate는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 해준다.

useNavigate를 통해 navigate 함수를 가져와 변수에 담아 사용한다.
첫 번째 인자로는 경로, 두 번째 인자로는 { replace, state } 인수를 사용한다.
replace의 default값은 false이며 뒤로가기가 가능하다는 의미이다.
replace: true를 사용하면, 경로 적힌 주소로 이동한 후에 뒤로가기를 하더라도 현재 페이지로 돌아오지 않고 메인 페이지('/')로 넘어간다.

const navigate = useNavigate();
navigate('경로', replace);

💡 v5에서는 useHistory를 사용하다가 v6부터 useNavigate로 변경되었다.

✔️ path 지정

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

<BrowserRouter>
  <Routes>
    <Route path="/propduct/:id" element={<Product />} />
  </Routes>
</BrowserRouter>

✔️ url에 넣어줄 정보 설정

import { useNavigate } from 'react-router-dom';
...
const nav = useNavigate();
...
const handleClick = () => {
  nav(`/propduct/${product.id}`);
};

✔️ URL에 담긴 URL 파라미터값 가져오기

import { useParams } from 'react-router-dom';
...
const params = useParams();
// value값 가져오기
const id = params.id;
...

📌 queryString 라우팅

1-7. useLocation

useLocation은 location 객체를 반환하며, location객체의 search값을 참고하여 queryString을 가져올 수 있다.

queryString은 ?key=value 형태로 경로에 유동적인 값을 넣는다. 여러 개의 queryString을 연결할 때는 &을 사용한다.
ex) /product?page=1&id=3

useLocation 속성
hash : 주소의 해시문자(#) 뒤의 값
pathname : 현재 경로
search : ?를 포함한 쿼리 스트링
state : 페이지로 이동시 임의로 넣을 수 있는 상태 값
key : location 객체의 고유 값

1-8. URLSearchParams

URLSearchParams에 location.search를 인자로 넘기면, 해당 객체의 get메소드를 사용하여 queryString의 key, value 쌍을 얻을 수 있다.

✔️ path 지정

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

<BrowserRouter>
  <Routes>
    <Route path="/product" element={<Product />} />
  </Routes>
</BrowserRouter>

✔️ url에 넣어줄 정보 설정

import { useNavigate } from 'react-router-dom';
...
const nav = useNavigate();
...
const handleClick = () => {
  nav(`/propduct?id={data.id}`);
};

✔️ URL에 담긴 queryString값 가져오기

import { useLocation } from "react-router-dom";
...
const location = useLocation();
const search = URLSearchParams(location.search);
// location.search = propduct?id=value
...
// key값에 해당하는 value값 가져올 때는 get
{search.get("id")}
...