리액트 라우터란?

리액트에서 경로에 따라 페이지를 나누도록 해주는 라이브러리입니다.

리액트스러운 방법으로 컴포넌트를 사용해서 페이지를 나누는 것이 특징입니다.

 

라우터

리액트 라우터를 사용하려면 반드시 라우터라는 컴포넌트가 필요한데요.

우리는 그 중에서도 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 이라는 컴포넌트를 활용하면 공통된 레이아웃을 지정해줄 수 있었죠.

PostLayout.js

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');
}

728x90

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

세 가지 모두 다 페이지를 이동할 때 쓸 수 있다는 점에서 비슷한데요.

이것들을 언제 사용하면 좋을지 예시랑 같이 한번 살펴봅시다.

Link

사용자가 클릭해서 페이지를 이동하도록 할 때 사용하면 됩니다.

하이퍼링크 텍스트나 페이지를 이동하는 버튼, 이미지 등에 사용하면 되겠죠?

대부분의 경우 Link 만으로도 충분합니다.

Navigate

특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용하면 됩니다.

예시:

• 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우
• 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우

useNavigate

특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때 사용하면 됩니다.

예시:

• 쇼핑몰에서 장바구니에 담기를 눌렀을 때 리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우
• 쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에 페이지를 이동시키는 경우
• 리다이렉트된 로그인 페이지에서 로그인을 완료한 후에 처음 진입했던 페이지로 돌아가는 경우