230731 useNavigate( )로 state 전달하기

❓ Problem

지금까지 나는 상세페이지를 구현할 때와 같이 수정페이지를 구현할 때도 클릭한 해당 게시글을 가져오는 방법으로 /edit/${post.id} 이렇게 해당 게시글의 id를 수정페이지에 파라미터로 넘겨주고 useParams를 통해 받아온 id 값과 게시글들의 id 값을 비교하여 해당 게시글을 찾는 방법을 사용하였다.

// Main 컴포넌트
const navigate = useNavigate();
onClick={() => {
  navigate(`/edit/${post.id}`);
}}

// Edit 컴포넌트
const { id } = useParams();
const posts = useSelector((state) => state.posts);
const post = posts.find((post) => post.id === id);

그러나 상세페이지를 모든 사용자가 단순히 조회하는 것과 달리 수정페이지는 수정이 가능한 유저만이 접근해야 하는데, 위와 같은 방법을 사용하면 사용자가 해당 게시글의 id 값을 알 때 아무나 수정 페이지로 접근이 가능하다는 문제점이 발생할 수 있다...!!!

📚 Try

id 값을 파리미터로 넘겨주지 않고 해당 게시글에 대한 정보를 가져오는 방법이 무엇이 있을까?? 생각하던 중 useNavigate( )의 두번째 인자에 대해 알게 되었다.

📖 Solution

useNavigate( ) 의 두번째 인자를 통해 게시글에 대한 정보를 가져오는 방법

⭐️ STEP 1 ) useNavigate( ) 의 두번째 인자로 해당 게시물에 대한 정보를 넘겨준다.

onClick={() => {
  navigate(`/edit`, { state: post });
}}

⭐️ STEP 2 ) 전달 받은 state는 useLocation( )를 이용해 받을 수 있다.

const post = useLocation().state;

💡 Point

⭐️ navigate("/이동할주소", { state : post }

• navigate는 첫번째 인자로 내가 이동할 주소를 받고, 두번째 인자로 state를 사용할 수 있다.
• 두번째 인자로{ state : post }를 사용하면 해당 아이템을 클릭할 때 페이지 이동을 하면서 state도 넘겨줄 수 있다!