useNavigate Hook을 사용하여 React에서 탐색 마스터하기

React에서 Navigate Hook 사용

useNavigate 후크는 React Router(v6 이상)의 일부이며 애플리케이션의 여러 경로를 프로그래밍 방식으로 탐색하는 데 사용됩니다. 기존 탐색(예: 링크 클릭)과 달리 useNavigate 후크를 사용하면 양식 제출, 버튼 클릭 또는 상태 변경과 같은 사용자 작업에 따라 동적으로 탐색할 수 있습니다.

이 후크는 React Router v5의 이전 useHistory 후크를 대체하고 기능 구성 요소 내에서 탐색을 더 쉽게 처리할 수 있게 해줍니다.

---

Navigate 작동 방식

useNavigate 후크는 프로그래밍 방식으로 특정 경로를 탐색하는 데 사용할 수 있는 함수를 반환합니다. 이 함수에 경로나 위치 개체를 전달할 수 있으며 그에 따라 탐색이 수행됩니다.

구문:

const navigate = useNavigate();

매개변수:

• path(string): 이동할 경로(예: "/home", "/profile/:id").
• 옵션(선택 사항, 개체):
  • 교체: 탐색이 현재 기록 항목을 대체해야 하는지 여부를 결정하는 부울입니다(기본값은 false).
  • state: 새 경로에 전달할 수 있는 선택적 상태입니다. 이는 대상 경로에 정보를 전달하는 데 유용할 수 있습니다.

일반적인 사용법:

• 다른 경로로 이동하세요.
• 현재 기록 항목을 바꿉니다(뒤로 작업 없음).
• 대상 경로에 추가 상태를 전달합니다.

---

예: useNavigate를 사용한 기본 탐색

다음은 사용자가 버튼을 클릭할 때 useNavigate 후크를 사용하여 프로그래밍 방식으로 탐색하는 방법에 대한 간단한 예입니다.

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

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

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

설명:

• useNavigate 후크는 탐색 기능을 가져오는 데 사용됩니다.
• 버튼을 클릭하면 navigate('/profile')를 사용하여 프로그래밍 방식으로 /profile 경로로 이동하는 goToProfile 함수가 호출됩니다.

---

예: 동적 매개변수를 사용한 탐색

useNavigate를 사용하여 매개변수를 전달하는 동적 경로로 이동할 수도 있습니다.

const navigate = useNavigate();

설명:

• navigate(/user/${userId})는 userId 매개변수를 기반으로 URL을 동적으로 생성합니다.
• 사용자 1 또는 사용자 2에 대한 버튼을 클릭하면 /user/1 또는 /user/2로 이동합니다.

---

예: 내역 항목을 교체 옵션으로 교체

탐색할 때 바꾸기 옵션을 사용하면 새 항목을 푸시하는 대신 기록 스택의 현재 항목을 바꿀 수 있습니다. 즉, 사용자가 브라우저의 "뒤로" 버튼을 클릭하면 이전 경로로 돌아가지 않습니다.

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

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

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

설명:

• navigate('/thank-you', { replacement: true })는 /thank-you 경로로 이동하여 기록 스택의 현재 항목을 대체합니다. 즉, 사용자는 다음을 사용하여 양식 제출 페이지로 돌아갈 수 없습니다. "뒤로" 버튼을 누르세요.

---

예: 탐색으로 상태 전달

내비게이션과 함께 추가 상태를 전달할 수 있으며, 이는 useLocation을 사용하여 대상 경로에서 액세스할 수 있습니다.

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

const UserList = () => {
  const navigate = useNavigate();

  const goToUserProfile = (userId) => {
    // Navigate to the profile of a specific user by ID
    navigate(`/user/${userId}`);
  };

  return (
    <div>
      <h2>User List</h2>
      <button onClick={() => goToUserProfile(1)}>Go to User 1's Profile</button>
      <button onClick={() => goToUserProfile(2)}>Go to User 2's Profile</button>
    </div>
  );
};

export default UserList;

/settings 경로에서 다음과 같이 전달된 상태에 액세스할 수 있습니다.

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

const SubmitForm = () => {
  const navigate = useNavigate();

  const handleSubmit = () => {
    // Perform form submission logic
    // Then navigate to a "Thank You" page, replacing the current entry in history
    navigate('/thank-you', { replace: true });
  };

  return (
    <div>
      <h2>Submit Form</h2>
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default SubmitForm;

설명:

• navigate('/settings', { state: { userId: 123, userName: 'John Doe' } })는 객체를 상태로 전달합니다.
• /settings 구성 요소에서는 useLocation을 사용하여 userId 및 userName이 포함된 전달된 상태에 액세스합니다.

---

일반적인 사용 사례Navigate

1. 양식 제출 후 리디렉션:
   양식(예: 사용자 등록)을 제출한 후 사용자를 성공 또는 로그인 페이지로 리디렉션할 수 있습니다.

2. 조건부 탐색:
   사용자 작업이나 조건(예: 인증)에 따라 동적으로 다른 경로로 이동할 수 있습니다.

3. 프로그래밍 방식 라우팅:
   작업이 완료되거나 이벤트가 트리거되는 경우와 같은 사용자 지정 논리를 기반으로 프로그래밍 방식으로 탐색할 수 있습니다.

4. API 호출 성공 후 탐색:
   성공적인 API 호출(예: 로그인) 후 사용자를 프로필 페이지나 대시보드로 리디렉션할 수 있습니다.

---

결론

React Router의 useNavigate 후크는 기능 구성 요소에서 프로그래밍 방식 탐색을 처리하기 위한 강력한 도구입니다. 이를 통해 사용자 작업이나 애플리케이션 상태에 따라 동적으로 다른 경로로 이동할 수 있습니다. 교체 및 상태 전달 기능과 같은 옵션을 통해 useNavigate는 React 애플리케이션에서 탐색 동작을 제어하기 위한 유연성을 제공합니다.

---

위 내용은 useNavigate Hook을 사용하여 React에서 탐색 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!