[React] useNavigate 이해하기

useNavigate 이해하기

• useNavigate란?
• useNavigate 사용 방법
• 심화

---

useNavigate란?

함수형 컴포넌트에서 사용하는 Hooks 중 하나입니다. 특정 이벤트가 발생하였을 때 주소를 이동시키는 기능을 제공합니다. HTML의 경우 아래의 코드와 같이 a태그와 href를 이용하여 주소를 이동하였다면 React에서는 useNavigate를 이용하여 주소 즉 React내에서 라우터 이동을 합니다.

<a href="http://www.naver.com">네이버</a>

---

useNavigate 사용 방법

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

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

useNavigate는 Router를 이동하는 데 사용되므로 import를 하기 위해서 react-router-dom에서 가져와 사용합니다. 가져온 useNavigate를 const navigate로 설정을 하고 소괄호 안에 이동할 라우터를 작성합니다. moveFunc라고 이름 지은 함수를 실행하면 소괄호 안에 작성한 라우터로 이동을 합니다.

---

심화

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

위와 같이 navigate는 인자를 2개 이상 받을 수 있습니다. 위의 경우는 replace를 true로 설정한 것입니다. 작성을 하지 않는다면 replace의 기본값은 false입니다. 위와 같이 replace를 true로 설정을 한다면 라우터를 이동 후 뒤로 가기를 하게 된다면 이전 화면이 보이는 것이 아니라 초기의 화면으로 이동하게 됩니다.

navigate("/이동할 라우터 명/*")

위와 같이 라우터 명 뒤에 /*을 붙이는 이유는 이동한 라우터에서 또 route를 사용하여 route를 추가로 작성할 수 있다는 표현이므로 이동한 주소에서 지금의 라우터 명 뒤에 라우터가 생길 경우 붙여주어야 합니다.

 

경로를 이동하는 다른 방법 Link 이해하러 가기