TIL-24.05.17

 

useNavigation, useLocation, useMatch, URLSearchParams

 

useNavigation
useNavigation 훅은 React Router v6에서 제공되며, 라우팅을 위해 사용됩니다. 이 훅은 네비게이션을 수행하고 쿼리 매개변수 및 라우트 파라미터를 업데이트하는 데 사용될 수 있습니다.

예시:

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

function MyComponent() {
  const navigation = useNavigation();

  const handleClick = () => {
    // 다른 경로로 이동
    navigation.navigate('/another-route');

    // 경로에 파라미터 전달
    navigation.navigate('/profile', { userId: '123' });

    // 쿼리 매개변수 전달
    navigation.navigate('/search', { query: 'react' });
  };

  return (
    <button onClick={handleClick}>Go to Another Route</button>
  );
}

 

 

useLocation
useLocation 훅은 현재 URL의 위치 정보를 반환합니다. URL의 쿼리 매개변수와 해시를 파싱하고 업데이트하는 데 사용될 수 있습니다.

예시:

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

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

  console.log(location.pathname); // 현재 경로
  console.log(location.search);   // 쿼리 매개변수
  console.log(location.hash);     // 해시

  return (
    <div>Current Path: {location.pathname}</div>
  );
}

 

 

useMatch
useMatch 훅은 현재 URL이 주어진 경로와 일치하는지 확인합니다. 이는 조건부 렌더링이나 활성 탭을 선택하는 데 사용될 수 있습니다.

예시:

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

function MyComponent() {
  const match = useMatch('/profile');

  return (
    <div>
      {match ? <p>Profile 페이지입니다.</p> : <p>Profile 페이지가 아닙니다.</p>}
    </div>
  );
}

 

 

URLSearchParams
URLSearchParams는 URL의 쿼리 매개변수를 다루는 데 사용됩니다. 이를 사용하여 쿼리 매개변수를 구문 분석하고 수정할 수 있습니다.

예시:

const params = new URLSearchParams(location.search);
const keyword = params.get('keyword');

console.log(keyword); // 쿼리 매개변수 값

 

 

 

 

이것들은 React Router와 함께 라우팅 및 네비게이션 작업을 할 때 유용한 도구들입니다. 이를 통해 라우팅된 컴포넌트들 간에 데이터를 전달하고, URL을 관리하며, 사용자를 다른 경로로 이동시킬 수 있습니다.