리액트 라우터
리액트에서 경로에 따라 페이지를 나누도록 해주는 라이브러리
리액트스러운 방법으로 컴포넌트를 사용해서 페이지를 나누는 것이 특징
라우터
리액트 라우터를 사용하려면 반드시 라우터라는 컴포넌트가 필요하다.
그 중에서도 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 이라는 컴포넌트를 활용하면
공통된 레이아웃을 지정해줄 수 있었다.
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
특정한 코드의 실행이 끝나고 나서 페이지를 이동시키고 싶을 때 사용
예시)
-
쇼핑몰에서 장바구니에 담기를 눌렀을 때
리퀘스트를 보내고 장바구니 페이지로 이동시키는 경우 -
쇼핑몰에서 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후에
페이지를 이동시키는 경우 -
리다이렉트된 로그인 페이지에서 로그인을 완료한 후에
처음 진입했던 페이지로 돌아가는 경우
