React Router :: URL 파라미터와 쿼리, 페이지에 유동적인 값 전달하기

URL파라미터와 쿼리

 

페이지 주소를 정의할 때 가끔 유동적인 값을 전달해야하는 경우가 있다.

이 경우 파라미터와 쿼리로 나눌 수 있다.

 

· 파라미터 예시 : /profiles/merorii

· 쿼리 예시 : /about?details=true

 

파라미터와 쿼리 두 가지 중 무조건 이 상황엔 이거!라고 정해진 규칙은 없다.

다만 일반적으로 파라미터는 특정 아이디 혹인 이름을 사용하여 조회할 때 사용하고,

쿼리는 우리가 어떤 키워들르 검색하거나 페이지에 필요한 옵션을 전달할 때 사용한다.

 

○ URL 파라미터

match 객체

URL 파라미터를 사용할 떄는 라우트로 사용되는 컴포넌트에서 받아오는 match라는 객체안의 params값을 참조한다.

match객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 들어있다.

 

const { username } = match.params;

 

URL파라미터를 사용할 때 라우트에 path는 아래와 같이 /profile/:username으로 넣어주면 된다.

이렇게 설정하면 match.params.username을 통해 username을 조회할 수 있다!

 

<Route path="/profile/:username" component={Profile} />

 

○ URL 쿼리

location 객체

쿼리는 location객체에 들어있는 search값에서 조회할 수 있다.

location객체는 라우트로 사용된 컴포넌트에게 props로 전달되며, 웹 애플리케이션의 현재 주소에 대한 정보를 다음과 같이 지니고 있다.

 

{
    "pathname": "/about",
    "search": "?detail=true",
    "hash": ""
}

qs 라이브러리

location객체의 search값중 특정 값을 읽어오기 위해서는 이 문자열을 객체 형태로 변환해주어야 하는데, 이때 qs라는 라이브러리를 사용한다

 

yarn add qs

 

const query = qs.parse(location.search, {
    ignoreQueryPrefix: true //이 설정을 통해 문자열 맨 앞의 ?를 생략
});

const showDetail = query.detail === 'true';	//쿼리 파싱 결과 값은 문자열

 

위 코드에도 적어두었지만 쿼리를 객체로 파싱하는 과정에서 결과 값은 언제나 문자열이나

숫자나 boolean값이 들어가더라도 문자열 형태로 받아오기 때문에

detail === '1'과 같은 방식으로 비교해야한다.