React에서 Link 사용하여 데이터 전송하기 !

React route에 Link에서 데이터 전송하기

오늘은 React에서 Link에 데이터를 전송하는 방법을 알아봤다.

데이터 전달이 가능하다는 것은 알았지만 마땅히 사용해볼 일이 없어서 찾아보지는 않았고, 오늘 사용하게 되서 이 기회에 한 번 정리 해보려고 한다.

우선 react에서는 a태그를 사용하지 않고서 왜 Link로 연결을 할까?
내가 알기로는 a태그로 연결 할 경우 새로 고침이 일어나기 때문에 Link로 a태그를 대신한다고 알고 있다.(브라우저에서 검사해보면 Link는 a태그이다.)

다시 본론으로 돌아가

Link를 사용해서 데이터를 전달하기

<Link to={{
 pathname: `/movie/${id}`,
  state: {
   year:year, 
   title:title, 
   summary:summary, 
   poster:poster, 
   genres:genres 
   } 
   }}>

위 코드를 예시로 들어보면, state안에 데이터를 담아 전달하게 된다.
위 예제에는 pathname만 있지만, 공식 문서를 보면 search, hash도 있다.

괄호가 2개로 감싸여있는데, 이유는 js코드를 작성하기 위한 괄호에 객체 형태로 들어가기 때문에 괄호가 하나더 있다. inline css style 작성 방법이랑 동일한 구조이다.

데이터 받기

import { useLocation } from 'react-router-dom';
// ...

const Detail = () => {
  const data = location.state; //  위에서 보낸 state값이 담겨져 있다.

  return (
    // ...
  );
}

이런 형식으로 사용하면 된다. useLocation을 import 한 후 / location을 사용하여 데이터를 받아 올 수 있다.

출처 : pearpearb.log 블로그