리엑트 라우터

리엑트 라우터란?
: 리엑트에서 경로에 따라 페이지를 나누도록 해주는 라이브러리 
- 컴포넌트를 사용해서 페이지를 나누는 것이 특징 


리엑트 라우터 핵심 
- Router
- Routes , Route
- Link 

1. 리엑트 라우터 설치
: react-router-dom 패키지를 import 한다. 

 

 

라우터
: 라우터라는 컴포넌트가 필요하다.
- BrowserRouter 
- 최상위 컴포넌트에서 감싸주면 모든곳에서 사용할 수 있다. 

 

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

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

 

 

2. 페이지 나누는 방법
: Routes 컴포넌트 안에 Route 컴포넌트를 배치해서 각 페이지를 나눠준다.

 

1) switch -> routes 네이밍 변경

: routes 는 첫번째로 매칭되는 path 를 가진 컴포넌트를 렌더링

- 적절히 <Route> 와 <routes > 를 섞어서 쓰면 훨씬 체계적으로 구현

- Routes 안에서 위에서부터 차례대로 Route를 검사
- 현재 경로와 path prop이 일치하는 Route를 찾는다. 

 

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


// 기존 Switch
<Switch>
    <Route exact path="/">
      <Header type={'main'} />
      <Visual />
      <Content />
    </Route>

    <Route path="/">
      <Header type={'sub'} />
    </Route>
</Switch>

 

 

3. Link로 이동하기

:  리엑트 라우터에서는 a 태그 대신에 Link 컴포넌트를 사용한다. 
- to 라는 prop으로 이동할 경로를 정해준다. 

 

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

 

 

4. NavLink로 네비게이션 구현하기 
: 메뉴에서 사용하는 기능 
- style이라는 prop으로 함수 지정 가능 


5. 하위 페이지 나누기 
:  Route 컴포넌트 안에다가 Route 컴포넌트를 배치하면 된다.

- 하위페이지에서 최상위 경로에 해당하는 경로는 path prop이 아니라 index라는 prop을 사용한다. 
- 부모 Route 컴포넌트에 element를 지정

 

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

 

 

6. useParams로 동적인 경로 만들기 
: 콜론(:)으로 시작하는 문자열을 사용하면 경로에 파라미터를 지정할 수 있다.
- useParams라는 훅을 사용하면 된다. 

 

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


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

 

 

 

7. 없는 페이지 처리하기
: NotFoundPage 


8.페이지 이동하기 

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

 

 

9. useSearchParams로 쿼리 사용하기

: 쿼리 값을 변경하고 주소를 이동하고 싶다면 Setter 함수에 객체를 넘겨준다.
- 객체의 프로퍼티로 쿼리 값을 지정
- SearchParams의 get 함수로 가져옴

 

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

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

  // ...
}

 

Link, Navigate, useNavigate 
: 세가지 모두 페이지를 이동할 때 사용

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

- 하이퍼링크 텍스트나 페이지를 이동하는 버튼, 이미지등에 사용

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

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


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

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

 

 

 

출처

 

https://reactrouter.com/

Declarative routing for React apps at any scale | React Router

https://baeharam.netlify.app/posts/react/why-switch-is-needed

[React] <Switch>는 언제 써야 할까? - 배하람의 블로그

https://blog.woolta.com/categories/1/posts/211

react-router v6에서는 어떤것들이 변했을까??