[React] useNavigate 와 useLocation를 같이 사용하면

🚀useNavigate ?

useNavigate를 사용하면 새로고침 없이도 페이지를 이동할 수 있게 됩니다.

Link 태그와는 달리 클릭을 통한 함수 호출로 페이지를 이동한다는 개념 보다는 특정 조건을 충족할 경우 페이지 이동을 하도록 할 수 있습니다.

const navigate = useNavigate();

 

 

 

🚀 useNavigate로 데이터 보내고, useLocation으로 데이터 받자

useNavigate는 단순히 특정 조건에 충족할 경우 페이지를 이동하는 기능 뿐만 아니라 이동할 때 데이터를 실어서 보낼 수 있습니다.

보내고 나면 useLocation을 통해 그 데이터를 받아서 사용하게 되는 것인데요.

useNavigate('/submit', {
  state: {
    title,
    content,
  }
})

위 코드는 /submit 주소로 이동할 때 state라는 객체를 같이 들고 가겠다는 말과 같은데요.

 

이제 이 데이터를 받은 /submit 주소는 다음과 같이 데이터를 받아 사용하면 됩니다.

const location = useLocation();

const { title, content } = location.state;

우리가 useNavigate를 통해 데이터를 보낼 때 state 객체 안에 title과 content를 실어서 보냈기 때문에 위와 같이 구조분해 할당 방식으로 가져와서 변수를 사용하듯이 사용하면 끝입니다.

 

🚀 사용해 보자

만약 Home 컴포넌트에서 작성한 제목과 내용을 /submit url로 바로 보내고 싶다면 다음과 같이 컴포넌트를 우선 만들 겁니다.

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

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

  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const onChangeInput = (e) => {
    if (e.target.name === 'title') setTitle(e.target.value);
    if (e.target.name === 'content') setContent(e.target.value);
  };

  return (
    <div>
      <h2>제목</h2>
      <input name="title" onChange={onChangeInput} />
      <h2>내용</h2>
      <input name="content" onChange={onChangeInput} />
      <div>
        <button>바로 전송하기</button>
      </div>
    </div>
  );
}
export default Home;

출력 화면

이제 바로 전송하기 버튼을 누르면 제목 input, 내용 input에 입력한 데이터를 /submit 주소로 이동할 때 이 데이터를 객체로 묶어 같이 보내려고 합니다.

const onClickSubmit = () => {
    navigate('/submit', {
      state: {
        title,
        content,
      },
    });
};

이제 바로가기 버튼을 누르게 되면 Home 컴포넌트에서 작성한 title과 content가 state라는 객체에 실려 /submit 주소로 가게 됩니다.

 

이제 /submit 주소에서는 이 온 데이터를 useLocation으로 받아보고 사용도 해봅시다

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

function Submit() {
  const location = useLocation();

  const { title, content } = location.state;

  console.log(title, content);
  return (
    <>
      <h3>제목 : {title}</h3>
      <h3>내용 : {content}</h3>
    </>
  );
}
export default Submit;

결과 화면