useLocation, URLSearchParams, location.search, 쿼리 문자열

minzyee·2023년 6월 28일

JavaScript Location React TIL URLSearchParams location.search useLocation 쿼리 문자열

Today I Learn

목록 보기

7/8

🤔 왜 공부하는지?

리액트 실습을 하며 react-router-dom 라이브러리를 이용해 useNavigate 훅과 Link 컴포넌트를 다루던 중에 useLocation과 URLSearchParams, 그리고 location.search, 쿼리 스트링을 접하게 되었는데 개념과 사용법 등을 알고싶고 기억하고 싶어서 글로 남기게 되었다. (카테고리가 JS인 듯 하지만 리액트 공부하다가 알게됐으니 리액트 썸네일을 달았다...)

📝 `useLocation` 이란?

useLocation 은 React Router에서 제공하는 훅으로, 현재 경로(location)와 관련된 정보에 접근할 수 있게 도와준다.

import { useLocation } from 'react-router-dom';

const SearchResults = () => {
  const location = useLocation();

  console.log(location.search); // 현재 경로의 쿼리 문자열

  return (
    // 컴포넌트 렌더링
  );
};

useLocation 훅을 호출하여 location 객체를 가져온다.

location 객체에는 현재 경로(location)와 관련된 여러 정보가 포함되어 있다.
(웰시코기를 검색한 뒤에 개발자 도구 창에서 location을 입력한 사진)

location.search는 현재 경로의 쿼리 문자열을 가져온다.

location.search

location.search는 웹 브라우저의 현재 URL에서 쿼리 문자열을 나타내는 속성으로,
문자열 형태로 쿼리 문자열(Query String)을 나타낸다.

❓ 쿼리 문자열(Query String)이란?

웹 URL에서 사용되는 일련의 매개변수와 그 값으로 구성된 문자열이다.
쿼리 문자열은 URL의 물음표(?) 이후에 나오는 부분이다.
일반적으로 매개변수와 값은 key=value 형식으로 작성되고, 여러 개의 매개변수는 &로 구분된다.

아래 URL에서 location.search는 ?q=react&category=frontend와 같은 값을 반환한다.
https://example.com/search?q=react&category=frontend
쿼리 문자열은 주로 웹 애플리케이션에서 검색어, 필터, 페이지 번호 등과 같은 매개변수를 전달하는 데 사용이 되는데, React Router를 사용하면 location.search를 통해 현재 경로의 쿼리 문자열에 접근하여 필요한 정보를 추출하거나 조작할 수 있다.

URLSearchParams 클래스와 함께 사용하면 location.search에서 파싱된 쿼리 문자열을 더 쉽게 다룰 수 있다.
URLSearchParams를 사용하여 특정 쿼리 매개변수의 값을 가져오거나 조작할 수 있다.

📝 `URLSearchParams` 란?

URLSearchParams 는 웹의 URL 쿼리 문자열을 다루는 JavaScript의 내장 클래스이다.
이 클래스는 쿼리 문자열을 파싱하고, 조작하고, 검색하기 위한 다양한 메서드를 제공한다.
URLSearchParams를 사용하면 쿼리 문자열을 다음과 같이 파싱하고 사용할 수 있다.

❗️ URLSearchParams과 쿼리 문자열

위의 예시에서 URLSearchParams를 사용해서 searchParams 객체를 생성하고, 생성자의 인자로 쿼리 문자열을 전달했다. 그러면 searchParams 객체에서 아래의 메서드를 사용할 수 있다.

get() : 사용하여 특정 쿼리 매개변수의 값을 가져올 수 있다.
has() : 특정 쿼리 매개변수의 존재 여부를 확인할 수 있다.
toString() : 쿼리 문자열로 다시 변환해준다.

URLSearchParams를 사용하면 URL 쿼리 문자열을 편리하게 다룰 수 있다.
React Router의 useLocation 훅과 함께 사용하면 현재 경로의 쿼리 문자열을 파싱하고 활용할 수 있다.

🛼 웰시코기 검색 후 콘솔창에서 확인해보았는데...

어째서 같은 웰시코기만 2개나 있을까?
뜬금 없긴 하지만 갑자기 궁금해졌다. 구글링으로는 적당한 사례를 찾지 못해 chatGPT에게 물어보았다.

구글 검색 결과 페이지 URL의 쿼리 문자열에서 'q'와 'oq' 파라미터가 중복으로 나오는 이유는 구글 검색 엔진의 동작 방식이 원인이 된다.

구글은 사용자의 입력 쿼리를 여러 가지 방법으로 분석하고 처리하는데

'q' 파라미터는 원래 검색어를 나타낸다.

'oq' 파라미터는 구글 검색 엔진 내부에서 사용하는 파라미터로,
검색 쿼리의 원래 버전을 나타내는 것으로 추정된다.

구글 검색 엔진은 'q' 파라미터를 원본 검색어로 사용하면서
'oq' 파라미터를 내부적으로 사용하거나 분석하는 경우가 있을 수 있다고 한다.

따라서, 구글 검색 결과 페이지에서 'q'와 'oq' 파라미터가 모두 동일한 값을 가질 수 있던 것이다.
쿼리 문자열을 해석하는 URLSearchParams 객체는 URL에서 파라미터와 그 값을 추출하기만 할 뿐,
중복된 파라미터에 대한 처리는 구글 검색 엔진의 내부 동작에 따르기 때문에 동일한 값을 반환하게 된다.