[리액트] Navigate 와 useNavigate 의 차이

공통점 

Navigate와 useNavigate는 둘 다 페이지를 이동(네비게이션)하는 데 사용

---

Navigate 컴포넌트

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

function ProtectedPage() {
  const userLoggedIn = false;

  if (!userLoggedIn) {
    return <Navigate to="/login" />;
  }

  return <div>Welcome to the protected page!</div>;
}

Navigate는 자동으로 페이지를 이동시킬 때 사용합니다.

페이지를 그릴 때, 특정 조건이 만족되면 바로 다른 페이지로 보내는 역할을 합니다.

• 언제 사용하나요? 사용자가 로그인하지 않았는데 보호된 페이지에 접근하려 할 때,
• 그 사용자를 로그인 페이지로 보내고 싶을 때 사용합니다.
• 어떻게 동작하나요? 컴포넌트가 화면에 렌더링되면서 바로 페이지를 이동시킵니다.

import { useState } from "react";
import "./style/main.scss";
import {
  Routes,
  Route,
  Link,
  useNavigate,
  Outlet,
  Navigate,
} from "react-router-dom";
import MainPage from "./pages/MainPage";

function App() {
  // 카테고리 버튼
  let [isShopHovered, setIsShopHovered] = useState(false);
  let [isBoardHovered, setIsBoardHovered] = useState(false);
  // 검색창 버튼
  let [Search, setSearch] = useState(false);

  return (
    <Routes>
      <Route path="/shop" element={<Navigate to="/shop/fingers" replace />} />
      <Route path="/shop/fingers" element={<div>Fingers Products</div>} />
      <Route path="/shop/hair" element={<div>Hair Products</div>} />
      <Route path="/shop/neck" element={<div>Neck Products</div>} />
    </Routes>
  );
}

export default App;

이 경우도 Navigate 를 썼다.

  <Route path="/shop" element={<Navigate to="/shop/fingers" replace />} />

/shop 페이지 주소를 입력하면 shop/fingers 로 페이지를 대체할 수 있도록 함.

( 상단에 import 는 필수 )

---

useNavigate 훅

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

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

  const goToAboutPage = () => {
    navigate('/about');
  };

  return <button onClick={goToAboutPage}>Go to About Page</button>;
}

useNavigate는

사용자가 특정 이벤트(예: 버튼 클릭)를 했을 때 페이지를 이동시키고 싶을 때 사용합니다.

 

이 방법은 자바스크립트 함수처럼 동작합니다.

• 언제 사용하나요? 사용자가 버튼을 클릭했을 때 다른 페이지로 보내고 싶을 때 사용합니다.
• 어떻게 동작하나요? 특정 이벤트가 발생했을 때,
• 예를 들어 버튼을 눌렀을 때 함수가 실행되면서 페이지를 이동시킵니다.

여기서 사용자가 버튼을 클릭하면 goToAboutPage 함수가 실행되고,

이 함수 안에서 navigate('/about')가 호출되어 사용자를 "/about" 페이지로 이동시킵니다.

요약

• Navigate는 컴포넌트가 렌더링될 때 조건에 따라 자동으로 페이지를 이동시키는 데 사용됩니다.
• 예를 들어, 로그인이 안 된 사용자를 로그인 페이지로 자동으로 보내고 싶을 때 쓰입니다.
• useNavigate는 사용자가 특정 액션을 할 때, 코드에서 직접 페이지를 이동시키는 데 사용됩니다.
• 예를 들어, 버튼을 눌렀을 때 특정 페이지로 보내고 싶을 때 쓰입니다.

이렇게 보면,

Navigate는 "이 조건이면 그냥 바로 이 페이지로 가!"라는 자동 리다이렉션 역할을 하고,

useNavigate는 "사용자가 뭔가 액션을 했을 때 내가 원하는 페이지로 보내자!"라는 역할을 한다고 이해할 수 있습니다.