React Router - useNavigate()

📌 useNavigate()

• 리액트 라우터의 훅 중 하나로, useNavigate를 사용하면 특정 이벤트가 발생 했을 때 다른 경로로 쉽게 이동할 수 있다.
• URL 변경을 처리하는 프로세스를 간소화 할 수 있다.

 

useNavigate 사용방법

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

const 컴포넌트 명 = ()=>{
    const navigate = useNavigate()
    
    const move = ()=>{
    	navigate("/이동할 라우터 명")
    }
    
    return {
        <div>
            <div onClick={move}>이동</div>
        </div>
    }
}

 

1. react-router-dom에서 useNative를 import 해온다

2. useNative를 const navigate로 설정해준다.

3. 소괄호 안에 이동할 라우터를 작성해준다.

4. 사용자가 클릭 했을 때, move라는 함수가 실행되면서 navigate로 작성된 라우터로 이동한다.

 

navigate("/이동할 라우터 명",{replace:true})

⭐ navigate는 인자를 2개까지 받을 수 있다. replace를 true로 설정하면 라우터 이동 후 뒤로가기를 했을 때

이전화면이 보이는 것이 아니라 초기의 화면으로 이동하게 된다. (특별히 작성하지 않으면 기본적으로 replace는 false)

 

 + 스터디에서 현수강사님께서 알려주신 부분 같이 첨부!!

웹페이지 링크 들어가면 보통 뒤로가기가 작동하잖아요?
replace는 지금 페이지를 원하는 페이지로 이동하는게 아니라 "교체" 하는 거라고 생각하시면 됩니다

즉 replace 로 이동하면 뒤로 가기를 했을 때 이동 전의 페이지로 돌아갈수가 없어요!

보통 로그인 페이지에서 많이 쓰입니다
로그인 후에 뒤로가기를 누르면 로그인으로 안가지는 서비스가 있을거에요

 

 

 

useNavigate의 특징과 활용방법

 

1. 프로그래밍적 제어

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

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

    const handleClick = () => {
        navigate('/target-path'); // '/target-path'로 이동
    };

    return (
        <div>
            <button onClick={handleClick}>이동하기</button>
        </div>
    );
};

export default MyComponent;

 

위의 코드에서는 클릭 이벤트가 발생 했을 때 target-path로 이동할 수 있다.

⇒ useNavigate를 사용해, 특정 조건이나 이벤트에 따라 동적으로 페이지 이동이 가능하다는 것을 확인 할 수 있다.

 

const handleSubmit = (e) => {
    e.preventDefault();
    if (formIsValid) {
        navigate('/success');
    } else {
        navigate('/error');
    }
};

 

또, 이런식으로 폼 제출 시 유효성 검사 결과에 따라 성공 혹은 에러 페이지로 이동할 수 있도록 처리하는 것도 가능하다!

 

 

 

2. 상태 전달

const handleSubmit = () => {
    navigate('/profile', { state: { username: 'JohnDoe' } });
};

 

프로필 페이지를 이동할 때 사용자 이름을 상태로 전달해, 이동한 페이지에서 이 정보를 사용할 수 있다.

 

3. 뒤로가기

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

    const handleGoBack = () => {
        navigate(-1); // 이전 페이지로 이동
    };

    return (
        <button onClick={handleGoBack}>뒤로 가기</button>
    );
};

 

이전 페이지로 돌아갈 때는 -1 을 인자로 넘기면 쉽게 뒤로가기 기능도 구현할 수 있다.

 

 

 

4. 쿼리 파라미터 포함

const handleSearch = (query) => {
    navigate(`/search?query=${query}`); // 쿼리 파라미터 포함해 이동
};

 

쿼리 파라미터를 포함해 이동하면 어떤 장점이 있는지 잘 모르겠어서 찾아보았다..!

• 사용자의 검색 상태나 필터링 조건을 URL에 포함 가능. 페이지 새로고침 시에도 사용자가 입력한 조건을 기억할 수 있다
• 특정 검색 결과나 필터링된 상태를 URL로 공유 가능하다.
• 검색 결과 페이지에 쿼리 파라미터를 포함하면, 검색 엔진이 해당 페이지를 인덱싱할 수 있어 검색 엔진 최적화에 도움을 준다.
• navigate(/search?query=${query}&sort=asc&category=books) 
  이런식으로 쿼리파라미터를 사용해 검색결과를 필터링하거나 정렬 할 수 있다.
• 코드에서 상태를 URL에 명시적으로 표현하므로 상태관리가 간편하고 관련 로직을 추적하기 쉬워진다.

+ 또 현수강사님 말씀 첨부,,ㅎㅎㅎㅎ

url(쿼리)에 상태 값이 있으면 새로고침 등의 경우에도 상태값을 불러올 수 있어서 사용합니다!

 

 

5. 단점

• useNavigate를 사용하는 컴포넌트가 상태나 props가 변경될 때마다 리렌더링될 수 있다.
• 여러 조건에 따라 이동하는 경우, useNavigate를 사용하면 경로 관리와 코드가 복잡해질 수 있다.
• React의 전역 상태 관리 라이브러리와 함께 사용 시, 상태가 페이지 이동에 따라 일관성을 잃을 수 있어 예상치 못한 동작이 발생할 수 있다.