React Router

조영래·2024년 2월 22일

리액트 라우터란?

리액트에서 경로에 따라 페이지를 나누도록 해주는 라이브러리
리액트스러운 방법으로 컴포넌트를 사용해서 페이지를 나누는 것이 특징

라우터

ex)
BrowserRouter
이 컴포넌트를 최상위 컴포넌트에서 감싸주면 모든 곳에서 사용할 수 있다.
import { BrowserRouter } from 'react-router-dom';
function App() {
  return <BrowserRouter> ... </BrowserRouter>;
}

페이지 나누는 방법

Routes 컴포넌트 안에다가 Route 컴포넌트를 배치해서 각 페이지를 나눠줄 수 있
이때 Routes 안에서는 위에서부터 차례대로 Route를 검사하는데
현재 경로와 path prop이 일치하는 Route 를 찾는다
<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="posts" element={<PostListPage />} />
  <Route path="posts/1" element={<PostPage />} />
</Routes>

링크

리액트 라우터에서는 <a> 태그 대신에 Link 컴포넌트를 사용함
to 라는 prop으로 이동할 경로를 정해주면 된다
<Link to="/posts">블로그</Link>

하위 페이지 나누기

Route 컴포넌트 안에다가 Route 컴포넌트를 배치하면 된다
이때 하위 페이지에서 최상위 경로에 해당하는 경로는 path prop이 아니라
index 라는 prop을 사용해야한다
<Routes>
  <Route path="/"><HomePage /></Route>
  <Route path="posts" element={<PostLayout />} >
    <Route index element={<PostListPage />}  />
    <Route path="1" element={<PostPage />}  />
  </Route>
</Routes>
이때 부모 Route 컴포넌트에 element 를 지정하고,
아래처럼 Outlet 이라는 컴포넌트를 활용하면 공통된 레이아웃을 지정해줄 수 있다
import { Outlet } from 'react-router-dom';
function PostLayout() {
  return (
    <div>
      <h1>블로그</h1>
      <hr />
      <Outlet />
    </div>
  );
}
export default PostLayout;

동적인 경로 다루기

콜론 (:) 으로 시작하는 문자열을 사용하면 경로에 파라미터를 지정할 수 있.
예를들어서 아래처럼 /posts/:postId 라는 경로는 /posts/123 이라던지
/posts/abc 라는 주소로 접속하면 123 이나 abc 라는 값을 postId 라는 파라미터로 받는다.
<Routes>
  <Route path="/"><HomePage /></Route>
  <Route path="posts" element={<PostLayout />} >
    <Route index element={<PostListPage />}  />
    <Route path=":postId" element={<PostPage />}  />
  </Route>
</Routes>
경로 파라미터를 사용하려면 useParams 라는 훅을 사용하면 된다
function PostPage() {
  const { postId } = useParams();
  // ...
}

쿼리 사용하기

useSearchParams 라는 Custom hook으로 SearchParams 객체를 받아올 수 있는데
이 hook은 SearchParams 객체와 Setter 함수를 배열형으로 리턴한다
이때 쿼리 값은 SearchParams 의 get 함수로 가져온다
import { useSearchParams } from 'react-router-dom';
function PostListPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const filterQuery = searchParams.get('filter');
  // ...
}
만약 쿼리 값을 변경하고 주소를 이동하고 싶다면 Setter 함수에 객체를 넘겨주면 된다.
이때 객체의 프로퍼티로 쿼리 값을 지정할 수 있다.
아래 예시는 ?filter=react 라는 쿼리로 이동하는 예시
setSearchParams({
  filter: 'react',
});

페이지 이동하기

Navigate 컴포넌트

리턴값으로 Navigate 컴포넌트를 리턴하면 to prop으로 지정한 경로로 이동합니다.
function PostPage() {
  // ...
  const post = getPost(postId);
  // post가 없는 경우 /posts 페이지로 이동
  if (!post) {
    return <Navigate to="/posts" />;
  }
  // ...
}
useNavigate Hook

useNavigate 라는 hook으로 navigate 함수를 가져오면 이 함수를 통해 페이지를 이동할 수 있다.
const navigate = useNavigate();
const handleClick = () => {
  // ... 어떤 작업을 한 다음에 페이지를 이동
  navigate('/wishlist');
}

Link, Navigate, useNavigate는 언제 쓰는게 좋을까?

세 가지 모두 다 페이지를 이동할 때 쓸 수 있다

Link

사용자가 클릭해서 페이지를 이동하도록 할 때 사용하면 된다.
하이퍼링크 텍스트나 페이지를 이동하는 버튼, 이미지 등에 사용하면 적절하다
대부분의 경우 Link 만으로도 충분하다

Navigate

특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용하면 적절하다
ex)

쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우

쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우

useNavigate

특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때 사용하면 적절하다
ex)

쇼핑몰에서 장바구니에 담기를 눌렀을 때 리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우

쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에 페이지를 이동시키는 경우

리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우