[React] react-router-dom v6 Link 객체 전달

AlBan·2021년 12월 12일
0
post-thumbnail

react-router V6 업데이트

React에서 SPA를 제공하기 위해 자주 사용하는 react-router가 v6로 업데이트가 되었다.

업데이트에 대한 자세한 내용은 공식문서를 참조하는 것이 좋을것 같다.


react-router 페이징 시 객체 전달

react-router이용하여 페이지를 변경할 때 객체 전달이 필요한 상황이 있다.

예로, 전체 게시판 목록을 서버로부터 받을 때 각 게시글에 대한 전체 내용을 받아서 목록을 출력하고, 출력된 목록을 클릭 시 각 게시글을 보여줘야 할 때 사용할 수 있다.

v5 버전에서 사용 방법

const PostList = () => {
  // ...
  return (
    <div>
      {postList.map(post => (
        <Link
          to={{
            pathname: '/post',
            state: {
              post: post,
            },
          }}
        />
      ))}
    </div>
  );
};
const Post= ({location})=>{
  const [post, setPost] = useState(location.state.post);
  // ...
}

기존의 v5에서는 <Link/> 태그에서 to속성을 이용해 할당이 가능했다.
이후 객체를 전달 받는 컴포넌트에서 location.state로 접근해 사용이 가능하다.

v6 버전에서 사용 방법

v6 버전에서는 기존의 방법대로 하면 객체가 전달되지 않는다. 이를 수정하는 방법은 간단한데 다음과 같이 변경하면 된다.

const PostList = ()=>{
  return (
    <div>
      {postList.map(post => (
        <Link to={'/post'} state={{ post: post }} />
      ))}
    </div>
  );
}
const Post = ()=>{
  const post = useLocation().state.post
  // ...
}

기존 <Link/> 태그에서 한번에 작성해주었던 to 속성을to와 state속성으로 나누었다.
이후 v6에서 제공하는 Hook인 useLocation() 훅을 통해 기존 버전의 location 객체에 접근했던 것처럼 접근하여 객체를 가져오면 된다.

참조

스택 오버 플로우
리액트 v6 변경사항이 정리된 블로그

profile
[Spring, React를 공부하는 끈질긴 개발자 지망생] 잊어버리지 않도록! 정리 또 정리!

0개의 댓글