React Router with Velopert - 02 -
- 파라미터와 쿼리
- URL Parameter
- Parameter 받아오기
- Query
- QueryString 받아오기
Chap 2. 파라미터와 쿼리
파라미터와 쿼리
Parameter : /profiles/:username
파라미터는 match 객체의 params
를 사용한다.
1 | const { username } = match.params; |
match
는 라우트 컴포넌트에서 물려받는다.
Query : /about?detail=true
쿼리는 location 객체의 search
를 사용한다.
location.search
는 그냥 사용하지는 못하고 문자열을 객체로 변환시켜야 하는데
그것은 qs라는 npm모듈을 이용한다.
1 | npm i query-string --save |
다음과 같이 사용할 수 있다.
1 | const query = qs.parse(location && location.search); |
location
는 라우트 컴포넌트에서 물려받는다.
URL Parameter
ID, 유저 네임등의 특정 데이터 조회하기 위해 사용한다.
1 | /profiles/kim |
kim
프로파일을 달라.
Parameter 받아오기
Profile 이라는 컴포넌트를 만들어서 파라미터를 받아오는 예제 코드.
src/Profile.js
1 | import React from 'react'; |
파라미터를 받아올 땐 match 안에 들어있는 params 값을 참조한다.
match 객체안에는 현재의 주소가 Route
컴포넌트에서 정한 규칙과 어떻게 일치하는지에 대한 정보가 들어있다.
path 규칙에는 /profiles/:username
으로 적용시키면 Profile 컴포넌트에서 match props를 통해 전달받을 수 있다.
src/App.js
1 | import React from 'react'; |
이제 /profiles/hyeok999
경로로 들어가보자.
Query
다양한 옵션을 주어서 검색할 때 많이 사용한다.
1 | /filter?type=book&sort_by=date |
book
이라는 타입을 가진 데이터를 date로 정렬해서 보여달라.
쿼리는 라우트 컴포넌트에게 props 전달되는 location 객체에 있는 search 값에서 읽어올 수 있다.
location 객체는 현재 앱이 갖고있는 주소에 대한 정보를 지니고있다.
1 | { |
여기서 중요한 것은 search 값이다. 문제는 search가 ?
로 시작되는 문자열이라 객체 형태로 변환을 따로 해주어야한다.
따라서 NPM 모듈을 설치하여 작업해주도록 한다.
1 | npm i query-string --save |
위는 qs라는 라이브러리로 location.search의 문자열을 손쉽게 객체형태로 변환해준다.
QueryString 받아오기
About이라는 컴포넌트를 만들고 search
값에 있는 detail 값을 받아와서, 해당 값이 true 일때 추가정보를 보여주도록 구현해 본다.
1 | import React from 'react'; |
/about?detail=true
경로로 들어가보자.