[React] 페이지를 이동하면서 값 전달하기: useNavigate()와 useLocation()

부모에서 자식, 자식에서 부모로 값을 전달하는 상황은 보통 props로 해결이 됩니다.

그러나 페이지를 이동하면서 값을 전달해야하는 상황은 부모와 자식의 관계가 아니기 때문에 다른 방법으로 해결해야 합니다.

바로 기존 페이지에서 useNavigate()*로 값을 전달하고, 새로운 페이지에서 useLocation()으로 값을 받아오는 방법입니다.

 

* React-dom-router v6 기준

---

useNavigate()

• 페이지를 이동하면서 값을 전달합니다.

1. useNavigate()를 객체에 초기화합니다.

2. 객체("/페이지 주소", { state: { 키: 값 } } )의 형태로 작성합니다.

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

const navigate = useNavigate();
const clicked = () => {
    navigate("/newpage", { state: { value: 1234 } });
};

navigate에 useNavigate()를 초기화하고, clicked가 실행되면 newpage로 이동하면서 1234를 전달합니다. 

 

useLocation()

• 이동한 페이지에서 값을 가져옵니다.

1. useLocation()을 객체에 초기화합니다.

2. 객체.state.키의 형태로 값을 가져옵니다.

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

const location = useLocation();
const number = location.state.value;

number에 1234의 값이 저장됩니다.