[React] 리액트 라우터(react-router-dom)로 컴포넌트에 객체 전달하기

오늘은 리액트로 개발 할 때 자주 사용되는 리액트 라우터로 컴포넌트에 데이터 전달하는 방법에 대해 알아볼게요! URL을 이용한 param과 query로 간단한 데이터 전달하는 방법은 알고 있었지만 객체를 전달할 수 있는 새로운 방법을 발견해 신기해서 글로 남겨봅니다 ㅎㅎ

React에서 Routing을 하는 방법은 여러가지가 있겠지만 저는 페이스북에서 제공해주는 react-router-dom라이브러리를 사용합니다. 이 글은 이 라이브러리를 써보았다는 가정하에 작성되었습니다.

페이지 간 데이터 전달 방법은 제가 사용해본 방식으론 총 3가지가 있습니다

 

• Params
• Query
• location 내의 state 변수 ⭐️

Params, Query

Params와 Query모두 URL을 이용하여 데이터를 전달합니다! Params는 URL에서 localhost:3000/about/:name 이런식으로 :을 통해 넘겨지는 값이고, query는 localhost:3000/about?name=jaeyong 이런식으로 ?을 통해 전해지는 값입니다. 이들은 컴포넌트에서 props를 통해 넘겨지는데 해당 props는 아래와 같이 세가지가 있습니다.

 

• history
• location
• match

history는 push, replace를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환이 가능케 해줍니다.
location은 현재 경로에 대한 정보를 가지고 있고, Query 정보를 소유하고 있습니다.
match는 어떤 라우팅에 매칭이 되었는지에 대한 정보를 가지고 있고, params 정보를 소유하고 있습니다.

Params

<Route exact path="/:name" component={About} />

위와 같이 라우팅을 연결해주고

import React from 'react';

export default function About({match}) {
    return (
        <div>
            <h2>About {match.params.name}</h2>
        </div>
    );
};

위와 같은 식으로 props로 불러와서 사용하면 됩니다!

Query

npm i query-string

query-string을 npm으로 설치해주고 URL에 ?name=jaeyong을 넣어줍니다. 불러올 때는 아래와 같이 불러오면 됩니다.

// 먼저 라이브러리 불러온다. query -> string 으로 바꿔주는 역할
import queryString from 'query-string';

// 라우팅으로 연결된 컴포넌트에서 아래 코드 입력
const query = queryString.parse(location.search);

query 정보는 location의 search에 들어있기 때문에 위와 같이 가져와서 사용 가능합니다.

location 내의 state 변수 이용

위 query와 params로 데이터를 전달할 경우 단점이 있어요! URL을 통해서 넘겨지는 값이 노출된다는 점과, 객체와 같이 복잡한 형태로 이루어진 데이터들을 넘겨주기 힘듭니다!!! 그래서 고민하면서 서칭하다가 Declarative Routing for React 방법을 발견했어요! 역시 공식 문서가 최고네요 ㅠㅠ

 

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

 

이어주는 Link 컴포넌트에서 to 객체내의 state를 통해 넘겨줄수 있어요!! 이렇게 넘겨줄 경우 URL에 보여지지도 않고, 내가 원하는 데이터를 가공해서 넘겨줄 수 있네요!

 

<Link
    to={{
      pathname: prevPage,
      state: {
        answer: answers,
        mbti: mbti,
      },
    }}
>
    <Button src={left_button} direction="left" alt="button" />
</Link>

 

저는 위와 같이 answer와 mbti 배열을 객체로 만들어 사용했습니다!!!

 

export default function GuidePage({ location }) {
  const answers = location.state.answer;
  const mbti = location.state.mbti;

  return ;
}

 

불러올 땐 위와 같이 코드를 작성했습니다 ㅎㅎ