React Router Hooks 함수들 정리 및 예시

React Router은 React 애플리케이션에서 탐색을 다루는 데 꼭 필요한 라이브러리입니다. React Router v6에서 훅이 도입되면서 라우팅 관리가 더 직관적이고 강력해졌습니다. 이 블로그 포스트에서는 라우팅을 개선할 수 있는 다섯 가지 중요한 React Router 훅을 살펴보겠습니다.

1. useNavigate(): 프로그래밍 방식으로 탐색을 간편하게

useNavigate 훅은 애플리케이션에서 다른 경로로 프로그래밍 방식으로 탐색할 수 있는 함수를 제공합니다.

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

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

  const handleClick = () => {
    // "/about" 경로로 이동
    navigate('/about');
  };

  return <button onClick={handleClick}>About 페이지로 이동</button>;
}

이 훅은 사용자 조작이나 일부 작업을 완료한 후에 발생하는 탐색에 특히 유용합니다.

2. useLocation(): 현재 위치 정보에 액세스하기

useLocation은 응용 프로그램의 현재 URL 위치를 나타내는 객체를 반환합니다.

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

function CurrentPath() {
  const location = useLocation();
  return <p>현재 경로는 {location.pathname}입니다.</p>;
}

이 hook은 현재 URL에 따라 결정되는 기능을 구현하는 데 매우 중요합니다.

3. useParams(): URL 매개변수 추출하기

useParams를 사용하면 라우트 경로에 정의된 URL 매개변수에 액세스할 수 있습니다.

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

function UserProfile() {
  const { username } = useParams();
  return <p>{username}의 사용자 프로필</p>;
}

// 라우트 정의에서의 사용법:
// <Route path="/users/:username" element={<UserProfile />} />

이 훅은 동적 경로를 생성하고 URL 기반 데이터에 액세스하는 데 중요합니다.

4. useOutlet(): 동적 중첩 라우트 렌더링

useOutlet은 JSX에서 명시적으로 정의하지 않고 부모 구성 요소 내에서 자식 경로를 렌더링하는 방법을 제공합니다.

import React from 'react';
import { useOutlet } from 'react-router-dom';

const ParentComponent = () => {
  const outlet = useOutlet();
  return (
    <div>
      <h1>부모 구성 요소</h1>
      {outlet}
    </div>
  );
};

이 훅은 Outlet 컴포넌트와 비교하여 중첩 경로를 처리하는 더 유연한 접근 방식을 제공합니다.

5. useRoutes(): JavaScript 객체 기반 라우팅

useRoutes를 사용하면 라우트를 JavaScript 객체로 정의하여 라우트 구성에 더 프로그래밍적인 접근 방식을 제공합니다.

import React from 'react';
import { useRoutes } from 'react-router-dom';

const routes = [
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/users',
    element: <Users />,
    children: [
      { path: ':userid', element: <UserDetail /> }
    ]
  }
];

const App = () => {
  const routeElements = useRoutes(routes);
  return (
    <div>
      <h1>내 앱</h1>
      {routeElements}
    </div>
  );
};

이 방식은 복잡한 라우팅이 필요한 애플리케이션이나 동적으로 생성된 경로에 특히 유용할 수 있습니다.

결론

React Router 훅은 React 애플리케이션에서 네비게이션을 효과적이고 유연하게 관리하는 강력한 방법을 제공합니다. useNavigate, useLocation, useParams, useOutlet 및 useRoutes를 활용하여 보다 동적이고 효율적이며 유지보수 가능한 라우팅 로직을 구성할 수 있습니다.

더 복잡한 애플리케이션을 개발함에 따라 이러한 훅을 숙달하는 것이 점점 더 가치 있어질 것입니다. 이 훅을 활용하면 간단한 네비게이션에서 복잡한 중첩 경로까지 다양한 라우팅 시나리오를 처리할 수 있으면서도 코드를 깔끔하고 선언적으로 유지할 수 있습니다.

이 훅을 효과적으로 활용하는 핵심은 애플리케이션의 네비게이션 요구 사항을 이해하고 각 시나리오에 적합한 훅을 선택하는 것입니다. 즐거운 라우팅하세요!