[ReactJS] Router useNavigate, useLocation, URLSearchParams

리액트에서 페이지 간 이동과 URL 관리는 매우 중요하다. 페이지 이동을 처리하기 위해 react-router-dom 라이브러리를 사용하는데 이 라이브러리는 페이지간 이동을 간편하게 처리할 수 있도록 다양한 기능을 제공한다.

그중에서도 useNavigate, useLocation, URLSearchParams는 경로 이동, 현재 위치 정보 확인, 쿼리스트링 관리 등을 효과적으로 수행할 수 있도록 도와주는 필수적인 도구이다.

 

---

 

useNavigate

useNavigate는 페이지 이동(네비게이션)을 수행하는 Hook이다. react-router-dom에서 제공하며, 특정 경로로 이동하거나 뒤로 가기 등의 기능을 수행할 수 있다.

import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate("/about");  // "/about" 페이지로 이동
  };

  return (
    <div>
      <h1>홈 페이지</h1>
      <button onClick={goToAbout}>About 페이지로 이동</button>
    </div>
  );
}

export default Home;


// 뒤로가기, 앞으로가기 기능
const navigate = useNavigate();

const goBack = () => {
  navigate(-1);  // 뒤로 가기
};

const goForward = () => {
  navigate(1);  // 앞으로 가기
};

 

 

---

 

 

useLocation

useLocation은 현재 URL 정보를 가져오는 Hook이다. 현재 경로, 검색(query) 파라미터, 해시값 등을 확인할 때 사용한다.

import { useLocation } from "react-router-dom";

function LocationExample() {
  const location = useLocation();

  return (
    <div>
      <h2>현재 경로: {location.pathname}</h2>
      <h3>쿼리 스트링: {location.search}</h3>
    </div>
  );
}

export default LocationExample;

 

 

/profile?id=123&name=John에서 실행하면 아래와 같이 나온다.

현재 경로: /profile
쿼리 스트링: ?id=123&name=John

 

 

---

 

 

URLSearchParams

URLSearchParams는 URL의 쿼리스트링(query parameters)을 쉽게 다룰 수 있는 내장 객체이다. useLocation().search를 활용해 URL 파라미터를 다룰 때 유용하다.

// 쿼리스트링에서 값 가져오기
import { useLocation } from "react-router-dom";

function QueryParamsExample() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  const id = queryParams.get("id");
  const name = queryParams.get("name");

  return (
    <div>
      <h2>사용자 ID: {id}</h2>
      <h2>이름: {name}</h2>
    </div>
  );
}

export default QueryParamsExample;

 

 

/profile?id=123&name=John에서 실행하면 다음과 같이 나온다.

사용자 ID: 123
이름: John