리액트 라우터란?

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

---

라우터

• 리액트 라우터를 사용하려면 반드시 라우터라는 컴포넌트가 필요함
• 우리는 그 중에서도 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');
}

---

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

• 세 가지 모두 다 페이지를 이동할 때 쓸 수 있다는 점에서 비슷함

Link

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

Navigate

• 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용하면 됨
• 예시
  • 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우
  • 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우

useNavigate

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