React : params 사용하기 URLSearchParams 사용법 +) npm i query-string

React : params 사용하기 URLSearchParams 사용법 +) npm i query-string

 

 

 

1. Params 란?

이런식으로 ? 뒤에 딸려들어가는 key 와 value 값을 params 라고 한다.
url주소와 상관없이 params로 들어가면 동일한 url에서도 여러가지 필터들을 겹쳐 표현된다.
우리들이 필터를 사용해 검색할때 검색 정보를 들고가는 역할을 한다.

 

 

 

2. URLSearchParams

https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams
구체적인 정보가 필요하신 분들은 링크를 이용해주세요

react에서 params를 사용하고 싶을때 사용할 수 있는 정의이다.
보통은 아래 코드처럼 props를 사용해 검색된 항목을 담고
그 항목을 URLSearchParams를 사용해 다른 obj에 담고 get을 사용해 필터의 key값을 입력해주면 해당 value를 불러오는 것이 가능하다

export default function About(props) {
  //params 에 담긴 항목 가져오기 
  const searchParams = props.location.search;

  //obj에 URLSearchParams를 사용해 담아준다. 기본값은 {}가 나온다
  const obj = new URLSearchParams(searchParams);

  //name으로 검색된 value 값을 가져오기 위해 get을 사용해준다
  console.log(obj.get("name"));

  return <div>About 입니다</div>;
}

 

 

 

👉 console

 

 

2. URLSearchParams 의 단점 극복

일일히 get을 통해 값을 지정해주어야 하는것과 모든브라우저에서 지원해주지 않는다는 단점을 가지고 있기 때문에 npm i query-string 을 사용해 해당 단점들을 해결해 줄 수 있다.

npm i query-string

 

 

 

사용하기

import queryString from "query-string";

export default function About(props) {
  const searchParams = props.location.search;
  const query = queryString.parse(searchParams); //사용
  console.log(query);

  return (
    <div>
      <h2>about</h2>
      {query.name && <p>name 은 {query.name} 입니다.</p>}
    </div>
  );
}

 

 

 

👉 console

 

콘솔에 key와 value 값으로 정리되서 들어오기 때문에 데이터값을 유동적으로 사용할 수 있어진다!