리액트 라우터 정리 (react-router-dom)

🎀 라우터 설치

npm install react-router-dom@6

터미널에 위 명령어 입력하면 자동으로 설치됩니다.

🎀 BrowserRouter

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

function App() {
  return <BrowserRouter> ... </BrowserRouter>;
}

BrowserRouter라는 녀석으로 전체 코드를 감싸주면
모든 페이지에서 라우터 사용이 가능하다.
보통 저렇게 전체를 감싸준 다음 개발을 시작한다.

🎀 페이지 나누기

📌 기본

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="posts" element={<PostListPage />} />
  <Route path="posts/1" element={<PostPage />} />
</Routes>

switch문 처럼 Route안의 경로를 위에서 부터 차례로 대입하여 일치하는지 검사한다.
만약 경로가 일치한다면, element 안에있는 컴포넌트를 화면에서 보여준다.

📌 하위 페이지 나누기

<Routes>
  <Route path="/"><HomePage /></Route>
  <Route path="posts" element={<PostLayout />} >
    <Route index element={<PostListPage />}  />
    <Route path="1" element={<PostPage />}  />
  </Route>
</Routes>

Route하위에 또 Route를 배치하면 된다.
이때 해당 하위 페이지의 메인(최상위) 페이지는 path가 아니라 index를 표시해주면 된다.

index가 표시된 페이지가 제일 먼저 노출되고, 그 다음 하위 페이지를 클릭하면 노출된다.

📌 공통 레이아웃 적용 (Outlet의 사용)

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

function PostLayout() {
  return (
    <div>
      <h1>블로그</h1>
      <hr />
      <Outlet />
    </div>
  );
}

export default PostLayout;

하위 페이지들을 감싸는 Route 안에 Outlet을 추가하면
해당 페이지를 하위 페이지들의 공통 레이아웃으로 사용이 가능하다.

📌 동적인 경로 다루기 (useParam)

콜론 (:) 으로 시작하는 문자열을 사용하면 경로에 파라미터를 지정할 수 있다.

<Routes>
  <Route path="/"><HomePage /></Route>
  <Route path="posts" element={<PostLayout />} >
    <Route index element={<PostListPage />}  />
    <Route path=":postId" element={<PostPage />}  />
  </Route>
</Routes>

function PostPage() {
  const { postId } = useParams();
  // ...
}

📌 쿼리 사용하기

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

function PostListPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const filterQuery = searchParams.get('filter');

  // ...
}

useSearchParams이라는 hook은 useState 마냥
SearchParams 객체와 Setter 함수를 배열형으로 리턴한다.

setSearchParams({
  filter: 'react',
});

Setter 함수에 객체를 넘겨주면 된다.

🎀 페이지 이동하기

📌 Link (a 태그의 대체)

<Link to="/posts">블로그</Link>

리액트 라우터에서는 a 태그 대신에 Link를 사용한다.

📌 Navigate 컴포넌트 (리다이렉트)

function PostPage() {
  // ...

  const post = getPost(postId);

  // post가 없는 경우 /posts 페이지로 이동
  if (!post) {
    return <Navigate to="/posts" />;
  }

  // ...
}

리턴값으로 Navigate 컴포넌트를 리턴하면 to prop으로 지정한 경로로 이동한다.

📌 useNavigate Hook (리다이렉트)

const navigate = useNavigate();

const handleClick = () => {
  // ... 어떤 작업을 한 다음에 페이지를 이동
  navigate('/wishlist');
}

useNavigate 라는 hook으로 navigate 함수를 가져오면 이 함수를 통해 페이지를 이동할 수 있다.

🎀 언제 써야하지?

📌 Link

사용자가 클릭해서 페이지를 이동 하도록 할 때 사용

📌 Navigate

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

예시:

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

📌 useNavigate

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

예시:

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