[React] 컴포넌트 사이에서 데이터 주고받기 (useNavigate & useLocation)

컴포넌트간에 useNavigate 훅을 사용하면서 데이터를 함께 넘겨주고 싶을 때가 있다.
이럴 때에는 useNavigate와 useLocation을 적절히 활용해주면 된다.

// UserCard.jsx

export default function UserCard() {
	const [user, setUser] = useState();
    const navigate = useNavigate();
    
    const handleClickUser = () => {
    	navigate(`/user/${user.id}`, {state: user})
    }
    
    return (
    	<div onClick={handleClickUser}>...</div>
    )
}

위의 UserCard 컴포넌트에서는 user state에 유저 정보를 담고 있다.
해당 컴포넌트를 클릭했을 때 디테일 페이지로 넘어감과 동시에 컴포넌트에서 가지고 있는 유저 정보를 함께 넘기려고 한다.
useNavigate의 두번째 인자로 객체안에 state 프로퍼티로 넘겨주면
아래와 같이 useLocation 훅으로 받을 수 있다.

// UserDetail.jsx

export default function UserDetail() {
	const location = useLocation();
  	const user = location.state;
  
  	return (...)
}