[React] URL 파라미터 가져오기, query string 추출 방법 2가지

React에서 특정 URL에서 전달한 Params값을 가져와야 할 때 리액트 라우터 돔을 사용하면 useParams를 사용하면 되지만 사용 환경에 따라 nextjs를 사용하거나 리액트 라우터 돔을 사용하지 않을 경우 해당 Params값을 추출하기 위해 라우터 돔을 설치하는 것은 굉장히 비효율적입니다. 

 

이때 쉽게 Params 값을 가져와서 처리할 수 있는게 window의 기본 객체인 location객체의   search 파라미터입니다.

리액트에서의 location은 javascript의 window.location과 동일합니다. search 파라미터는 url의 ? 뒤에  전달하는 파라미더값을 가져올 수 있습니다.

가령 위의 주소처럼  'localhost:3000/?id=1' 과 같은 주소가 있다면 가져올 키 값은 id입니다. id를 기준으로 뒤의 값인 '1'을 가져오게 됩니다.

1. 변수로 조회

cosnt urlCheck = (location) => {

  console.log("location:", location);
  console.log("location.search:", location.search);

  const params = new URLSearchParams(location.search);

  const name = params.get("가져올 키값(기준값)");
  console.log("params.get('가져올 키값(기준값)'):", name);
}

 

2. 함수로 조회

const urlCheck = (location) => {

  let getParameter = (key) => {
    return new URLSearchParams(location.search).get(key);
  };

  const name= getParameter("name");
  console.log('getParameter 함수: ', name);
}

결과는 두 가지 방법 모두 동일하게 나옵니다.

감사합니다.