React Router를 이용하여 component간에 props 넘겨주기
저번시간에는 React에서 component간에 props를 어떻게 하면 주고 받을 수 있는지를 알아보았습니다. 그리고 말미에 React Router를 사용하여 page routing을 할때 data를 내려주는 방법에 대해서 예기해보겠다고 했었죠? 오늘은 이걸 알아보는 시간을 가져보도록 하겠습니다.
1. match.params 값으로 데이터 넘기기
전 시간에도 배웠다 시피 component에서 component로 데이터를 넘겨줄때는 props를 사용하여 편리하게 데이터를 넘겨줄 수 있었습니다.
하지만 만약 단순히 component가 랜더링될때 넘겨주는게 아니라 Routing을 통하여 페이지가 이동할때 넘겨줘야 한다면 어떻게 하면 될까요?
여러 방법이 있겠지만 저에게 가장 처음 떠올랐던 방법은 Routing한 component들이 가지는 props 값들을 이용하는 것이었습니다. Routing한 component들은 history, location, match라는 3가지 읽기전용 데이터를 전달 받습니다. 이중에서 match값은 Router 주소값에 저희가 원하는 정보를 붙여서 보내면 이를 읽을 수 있습니다.
a. Router 주소에 parameter 직접 입력하기
그러면 match값은 어디에서 정보를 가져올까요?
보통 Routing을 할때 주소 값을 부여하게 되는데요, 여기에 보통 원하는 text값과 ‘/’를 붙여서 주소를 만들어 줍니다. 그리고 이 주소를 브라우저 주소창에 치게 되면 해당 Component가 랜더링 되는것이죠. match를 이용하려면 우리가 부여한 이 주소 뒤에 ‘/:parameter이름' 형태의 주소값을 추가해주면 됩니다. 이렇게 넘겨준 정보는 넘겨준 component에서 match.params에 접근하면 쉽게 불러올 수 있습니다.간단하죠? 이제 설정은 완료했고 그러면 이제 사용법을 알아보겠습니다.
일단 가장 기본적인 사용방법은 해당하는 parameter자리에 저희가 직접 원하는 값을 입력해주는 것입니다. 위 코드에서 ‘/author’에 해당하는 주소에 id와 author라는 parameter값을 부여했습니다. 그리고 제가 만든 간단한 사이트는 이 값을 참조하여 해당 id값의 이미지와 해당 작가의 이름을 표시해 줍니다.
이런식으로 말이죠. 하지만 중요한게 빠진거 같은 느낌이 들죠. 저 값을 부여를 했다 치면 도대체 어떤 방법으로 받아 올까요. 이제 여기서 아까 말했던 match값을 쓰면 됩니다.
우선 Routing을 했다면 기본적으로 3가지의 props값을 받는다는건 아까 설명했죠? 그리고 아까 주소에 부여했던 parameter값은 match값을 통해서 불러 올 수 있다고 말했습니다. 위의 console을 보면 알 수 있듯이 우리가 입력하고 넘겨준 parameter정보가 match.params에 담겨서 오는 것을 볼 수 있습니다. 이것을 넘겨받아서 페이크데이터 url에 id값을 부여해주면 id에 해당하는 이미지가 뜨게 되고 넘겨받은 작가이름은 h2태그에 넣어주어서 우리가 볼 수 있게 만들어 주는 구조입니다.
b. Router주소에 parameter를 부여하기
물론 parameter를 직접 입력해서 접근하는 것도 하나의 방법이지만 일일이 주소를 쳐서 해당사이트에 접근하는 것은 사이트의 규모가 커질 수록 비효율 적이겠죠? 직접입력해서도 된다면 애초에 Routing을 할때 parmeter값을 부여해줄 수도 있겠죠? 지금 부터는 이 방법을 알아보겠습니다.
원리는 간단합니다. 저희가 직접 입력했던 parameter부분을 Link to 태그를 이용하여 넘길때 값을 줘버리는 겁니다. 지금 제가 제시한 예제는 props로 받은 image의 id값과 작가이름을 넘기지만 이 부분은 여러분들이 얼마든지 응용 할 수 있는 부분이라고 생각합니다. 이렇게 해서 링크를 걸어주면 일일이 주소값에 parameter를 입력하지 않더라고 입력이 된체로 넘어가기 때문에 훨씬 편리합니다.
2. match.params값을 사용하지 않고 데이터 넘기기
match.params를 이용하여 주소도 부여하고 데이터도 넘기는 방법에 대해서 알아봤습니다. 하지만 이렇게 하면 단점이 생기는데요, 하나는 넘기는 데이터가 많아지면 주소값이 너무 길어진다는 것과 만약 넘겨야하는 데이터가 보안상 중요한 데이터라면 주소를 통해서 너무 쉽게 노출이 되버리기 보안상 헛점이 생길 수도 있습니다. match값으로는 간단히 주소만 정해주고 중요한 데이터를 Routing할때 넘겨주려면 어떻게 해야 할까요?
Linkto를 앞서 사용할때는 해당 component의 주소값만을 넣어서 사용했지만, 사실 Object형태로 확장이 가능합니다! Linkto를 확장하면 pathname, query, hashname, state 이렇게 4가지 key를 가질 수 있게 됩니다. 여기서 pathname은 우리가 기존에 기본값으로 넣어서 사용했던 component주소를 넣어주면되고 데이터는 위의 스크린샷과 같이 state형태로 넘겨줄 수가 있습니다. 자 이제 데이터를 넘겨줬으니 받아서 사용해야겠죠? 어떻게 받아서 사용할까요?
앞서 말했듯이 Routing된 component는 3가지 props를 가진다고 했죠? 우리가 Link를 통해 넘겨준 데이터는 location에서 접근 할 수 있습니다. 그래서 ‘this.props.loaction.데이터이름’ 의 형태로 가져다 쓸 수 있는 거죠.
이번 시간에는 React Router를 사용할때 데이터를 주고 받는 방법에 대해서 알아봤습니다. 다음시간에는 infinite스크롤을 구현하면서 겪었던 일들을 공유해보려 합니다.