React Router

📌React Router로 웹사이트 만들기

• 📘리액트 라우터
  리액트 컴포넌트로 페이지를 나누는 라이브러리

  • Router: 리액트 라우터에서 사용하는 데이터들을 모두 갖고 있는 녀석이다.
    현재 주소나 페이지 기록 같은 데이터를 가지고 있다. 이게 없으면 리액트 라우터를 쓸 수 없다.
    리액트 라우터에서 제공하는 기능을 사용하려면 반드시 라우터 컴포넌트 안에서 사용해야 한다.
    
    
  • Routes, Route: 이 두 컴포넌트는 주로 같이 사용된다. Routes 컴포넌트 안에서 Route 컴포넌트로 페이지의 경로, 보여줄 컴포넌트를 지정한다. 차례대로 경로를 살펴보다가 맞는 경로를 찾으면 그 안에있는 컴포넌트를 보여준다.
    
    
  • Link: 리액트 라우터에서 a태그 대신 사용되는 것이다.

• 📘페이지 나누는 방법
  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
    특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용하면 됩니다.

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

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

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

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

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

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