< 꼭꼭 다크모드로 보세요 >

본 포스트는 Udemy 의 리액트 강좌를 정리한 글입니다.

강의 링크

🧩 react-router-dom 이란?

react-router-dom 은 React 앱 내에서 페이지 이동을 가능하게 해주는 라이브러리이다. 흔히 쓰는 a 태그와 다르게 페이지가 새로고침 되지 않고 부드럽게 넘어가는 효과를 구현할 수 있다. 기존의 버전 5에서 6으로 넘어오면서 꽤 많은 문법이 수정되거나 추가되었다. 본 포스트는 버전 6을 사용한다.

react-router-dom 의 기본적인 기능을 정리해봤다.

📌 react-router-dom 의 컴포넌트

• BrowserRouter - react-router-dom 을 이용한 페이지 이동 기능을 구현하려면 관련 컴포넌트를 이 컴포넌트로 감싸줘야 한다.

• Routes - (버전 5의 Switch 에서 변경되었다.) Route 컴포넌트를 감싸는 태그이다. (무조건 감싸줘야 한다.)

• Route - 페이지의 경로와 렌더링할 페이지를 정의하는 컴포넌트이다. 버전 6에서 바뀐 점은 다음과 같다.

  • 버전 5에서는 페이지의 경로가 부분적으로 겹치면 리액트가 중첩 라우팅으로 처리했다. (예를 들어 /user 과 /user/:id)
    이를 방지하기 위해서 exact prop 을 전달해서 페이지가 독립적으로 동작할 수 있게 만들었다. 하지만 버전 6은 따로 prop 을 전달하지 않아도 페이지가 독립적으로 작동한다.
  • 렌더링할 페이지를 자식 컴포넌트에 넣던 버전 5와 달리 버전 6에선 element prop 에 전달한다. 그리고 중첩 라우팅할 페이지를 자식 컴포넌트에 넣는다.

• Link - 부드러운 페이지 넘김 효과를 구현하려면 a 태그 대신 Link 를 써야한다. 이동할 페이지는 to prop 에 전달한다.

• Outlet - 중첩된 페이지를 어디에 나타낼지 정의하는 함수이다.
  
  

📌 react-router-dom 의 함수

• useLocation() - 현재 url의 정보를 Object 형태로 받을 수 있다. pathname 키에는 현재 url, search 키에는 쿼리 전체의 값이 들어있다. 자바스크립트 내장 함수인 URLSearchParams() 와 search 값을 이용하면 쿼리의 값을 받을 수 있다.

<사용방법>

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

// 현재 url -> /book/11?page=3&sort=asc
const location = useLocation();
const { pathname, search } = location; 
// pathname -> /book/11
// search -> ?page=3&sort=asc

const queryParams = new URLSearchParams(location.search);
const thisPage = queryParams.get('page') // 3 (현재 페이지)
const sort = queryParams.get('sort') // 'asc' (오름차순 정렬)

• useNavigate() - (버전 5의 useHistory() 에서 변경되었다.)
  페이지를 강제로 이동시키는 함수이다. 사용하는 방법은 다양하다.

  • 직접 url을 넣으면 그 페이지로 이동한다.
  • 숫자를 넣으면 그 숫자만큼 뒤로/앞으로 간다. (-2) -> 두 단계 전으로
  • Object 형식으로 url과 쿼리를 조합해서 넣을 수도 있다. 퀴리 스트링은 react-router-dom 의 createSearchParams() 을 활용하면 쉽게 만들 수 있다.

<사용방법>

import { useNavigate, createSearchParams } from 'react-router-dom';

const navigate = useNavigate();

navigate('/login') // 로그인 페이지로 이동

navigate(-1) // 한 단계 전으로 (브라우저의 뒤로가기 한번)
navigate(2) // 두 단계 앞으로 (브라우저의 앞으로가기 두번)

navigate({ // /book?sort=asc&page=3 으로 이동
      pathname: '/book', // useLocation()의 pathname을 넣을 수도 있다. 
      search: `?${createSearchParams({
        sort: 'asc',
        page: 3,
      })}`,
    });