[React] Link로 데이터 전달하기

프로젝트를 하며 프로필페이지로 이동할때 현재 로그인한 유저의 정보도 함께 넘겨주어야했다. redux store에 저장해서 사용할수도 있었지만 props처럼 바로 넘기는게 더 효율적일꺼라 생각했다.
그래서 프로필 버튼을 누를때 를 사용하여 이동시키는데, 이 때 데이터도 같이 넘기는 방법이 없을까 찾아보았다.

공식 문서를 찾아 보니 Link 혹은 Navigate 두가지 방법으로 사용할 수 있다.
두 방법다 state 에 데이터를 전달해줘야 한다. 차이점이라면 Link는 {{}} 두개를 navigate는 {} 한개로 감싸져있다.
받는 곳에서는 useLocation을 import 받은 다음 사용하면 된다

<Link to="/pins/123" state={{ fromDashboard: true }} />;

let navigate = useNavigate();
navigate("/users/123", { state: partialUser });

아래는 내가 작성한 코드이다.

// Main.jsx
<Link to={`/profile/${userInfo.username}`} state={{ user: userInfo }}> Profile </Link>


// Profile.jsx
import React from "react";
import { useLocation } from "react-router-dom";

function Profile() {
	const location = useLocation();
	const user = location.state.user;

	return <div>hi {user.username} </div>;
}