리액트 라우터로 path와 querystring 받아오기

match와 location을 알아보도록 하겠습니다.

BrowserRouter와 우리의 App을 연결하면 어떻게 된다고 했었나요? 라우터가 history api에 접근할 수 있고, Route에 연결된 컴포넌트에 match와 location, history props를 전달합니다. 이번 포스팅에서는 match와 location에 대해서 알아보고 path와 querystring을 받아오도록 하겠습니다.

이전 예시에 위의 코드를 복사해서 붙여넣어주세요. 라우트가 하나이고, "/"에 연결되어 있기 때문에 앱을 실행하면 크게 Home이라는 글자가 적힌 것을 볼 수 있습니다. 페이지가 에러없이 작동되면 F12를 눌러 구글 개발자 모드를 실행하고 콘솔 창을 확인해주세요.

콘솔창에 match와 location이 표시됩니다.

우선은 나온 값들을 하나하나씩 알아보도록 하겠습니다. 우선 location 부분을 봐주세요. pathname이라는 키에 "/list"라고 적혀있습니다. pathname은 제가 요청한 url에서 path 값입니다. 즉 저는 localhost:3000/list를 요청한 것이죠.

이제 match 부분을 봐주세요. isExact부분이 False로 되어있습니다. 이는 우리가 요청한 부분의 path와 라우트에 path 속성에 적혀있는 값이 같은지를 나타내주는 겁니다. 우리 코드의 Route는 하나고 path="/" 라고 정의되어 있습니다. 즉 라우트가 하나라서 /list에 연결해주긴 했는데 완전히 같지만 않다라는 것을 알려주죠. 또 match의 path는 우리가 정의한 라우트의 path 속성의 값이 나타납니다. url은 location.pathname과 match.path에서 매치되는 부분이 어디인 지를 나타내주는 것입니다. 중요한 속성들을 알아봤으니 이제 path와 querystring을 받아와볼까요?

path 받아오기  

예시 코드를 변경해보겠습니다.

라우트에 path에 "/:name"으로 전달했습니다. 그러면 아까 match에서 보았던 키들중에 params에 name이라는 key로 우리가 실제로 전달한 값이 전달됩니다. "localhost:3000/anonymous" 라고 url 요청을 보내보세요.

path가 전달된 것을 확인할 수 있습니다.

/:name/:age 와 같은 형태로 라우트의 path를 설정해주었으면 두개의 키를 받을 수 있습니다.

모든 값은 문자로 전달됩니다. anonymous/1이라 전달하면 1은 "1"이 됩니다.

querystring 받아오기

쿼리스트링은 location에서 가져올 수 있습니다.

yarn add query-string

우선 쿼리스트링을 쉽게 객체로 바꿔 줄 쿼리 스트링을 다운로드 받아주세요.

쿼리스트링은 location.search에 저장되는 부분입니다. 이 부분을 queryString.parse에 전달해주면 객체로 만들어줍니다. 아주 쉽죠?

쿼리스트링을 전달했습니다.

에러없이 잘 나타나는 것을 확인할 수 있습니다.

라우터의 match와 location을 알아보면서 path와 querystring 값을 가져오는 연습을 해봤습니다. 리액트 라우터에 대해서 조금 더 이해가 되시나요? 공감은 제작자에게 큰 힘이 됩니다.