[React-Router] Link를 사용하여 다른 화면에 정보 보내기

 object를 이용하여 데이터를 다른 화면으로 보내기

<Link to="이동할 페이지" state={{ 변수 이름: "내용" }} />

다음과 같이 Link를 사용하여 데이터를 보낼 수 있다.

 

그리고 이 정보를 받아오기 위해서

let { state } = useLocation();

useLocation을 사용하면 state 변수에 Link로 보낸 state가 들어가게 된다.

 

 

 

** 시크릿 창으로 열면 에러가 날 것임 **

state가 정의되지 않기 때문에!

 

상세페이지로 바로 연결하고자 하면 그 이전 화면을 거쳐야지만 state를 만들어 전달할 수 있기 때문이다.

 

그러므로 다음과 같이 조건부연산자 ?를 이용하여

{state?.name || "존재하지 않음"}

state가 존재한다면 name을 출력하고 그렇지 않다면 "존재하지 않음을 나타내는 방식으로 사용할 수 있다.

 

 

위 기능을 이용하면 목록들이 쭉 나열되어 있는 페이지에서 

상세 페이지로 들어갔을 때 API를 여러번 불러야 하는 불상사를 막을 수 있을 것이다.