앞선 글을 통해 React Router의 활용 방법에 대해 알아봤었다. 이번 글을 통해서는, 이에 더 나아가 React Router를 통해 페이지를 이동하는 방법에 대해 알아보고자 한다.
리액트 애플리케이션에서 페이지 이동은 매우 중요한 기능이다. 이번 글을 통해 리액트 라우터의 useSearchParams, Navigate, useNavigate 등 다양한 페이지 이동 방법에 대해 살펴보자.
React Router를 통한 이동 방법
📌 Query 사용하기
useSearchParams는 URL의 쿼리 문자열을 관리하는 데 사용된다. 이 Custom Hook을 사용하면 URL 쿼리의 값을 읽거나 설정할 수 있다.
이때, useSearchParams를 이용하여 SearchParams 객체를 받아올 수 있는데, 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',
});📌 페이지 이동하기
1. Navigate 컴포넌트
Navigate 컴포넌트는 특정 조건에서 다른 경로로 리다이렉트할 때 사용한다. 예를 들어, 특정 포스트가 존재하지 않을 때 다른 페이지로 이동시키고 싶을 때 유용하게 사용 가능하다.
function PostPage() {
// ...
if (!post) {
return <Navigate to="/posts" />;
}
// ...
}2. useNavigate Hook
useNavigate는 함수형 컴포넌트에서 프로그래매틱하게 페이지를 이동시킬 때 사용한다. 예를 들어 특정 작업 후 페이지를 이동시키고 싶을 때 이 Hook을 사용하여 활용 가능하다.
const navigate = useNavigate();
const handleClick = () => {
// 작업 후 페이지 이동
navigate('/etc');
}📌 Link vs Navigate vs useNavigate
세 가지 모두 다 페이지를 이동할 때 쓸 수 있다는 점에서 비슷하지만, 각자의 목적성이 다르다. 이것들을 언제 사용하면 좋을지 예시와 함께 한번 살펴보자.
1. Link 컴포넌트:
Link 컴포넌트는 사용자가 클릭해서 페이지를 이동하도록 할 때 사용한다. 일반적인 하이퍼링크 텍스트, 버튼, 이미지 등에 적합한다.
2. Navigate 컴포넌트:
Navigate 컴포넌트는 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용합니다. 예를 들어, 로그인 페이지로의 리다이렉트나 품절된 제품 페이지에서 다른 페이지로의 이동 등에 사용된다.
3. useNavigate Hook:
useNavigate Hook은 특정한 코드 실행 후 페이지를 이동시키고 싶을 때 사용합니다. 예를 들면, 결제 완료 후 페이지 이동, 로그인 후 원래 페이지로 돌아가기 등의 상황에 적합하다.
Outro
이번 글을 통해 React Router를 활용한 다양한 페이지 이동 방법에 대해 살펴보았다. 특히, useSearchParams, Navigate 컴포넌트, 그리고 useNavigate Hook을 통해 리액트 앱 내에서 사용자의 페이지 이동 경험을 강화하는 방법들을 배우고, 각 기능들의 차이와 목적성을 비교하는 과정 속에서 각 기능들에 대해 더욱 심도깊은 이해를 할 수 있었다.
지난 글과 이번 글을 통해 배운 React Router에 대한 개념을 숙지하고, 이를 통해 리액트 애플리케이션의 사용성과 효율성을 향상시키는 방법으로 이를 끊임없이 활용하는 과정과 연습을 이어나가보자.
