[React] React

프로젝트 진행 중 게시물 상세 페이지 구현 시 원하는 게시물의 쿼리 문자열 정보를 상세 페이지 컴포넌트에 전달해야 했습니다.

이 시점에서 소품이 자식 구성 요소가 아니더라도 소품을 낮추는 방법이 필요했습니다.

검색을 통해 찾은 방법은 리액트 라우터의 링크에 상태로 전달하는 것입니다.

링크 상태

 import { Link } from "react-router-dom";
 <Link to={`post`} 
     state={{
                 'postindex': postindex
     }}>	
 </Link>

이와 같은 상태를 전달할 수 있습니다.

수신 시 useLocation을 사용해야 합니다.

useLocation

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

 const location = useLocation()
 const postindex = location.state?.postindex

 console.log(postindex) // 전달해준 값이 출력됨