URLSearchParams

📍URLSearchParams

1. 목적

• JavaScript에서 URL의 쿼리 매개변수(문자열)를 다루기 위한 인터페이스
• 상태 관리, 모달 표시, API 요청 등 다양한 상황에서 유용하게 활용

 

2. 쿼리 문자열의 구조

• 쿼리 문자열은 URL에서 ? 기호 뒤에 위치하며, 여러 쿼리 매개변수는 & 기호로 구분된다.
• 일반적으로 key-value 쌍으로 이루어짐
• 사용 예:
• const queryString = window.location.search; // '?key1=value1&key2=value2' const params = new URLSearchParams(queryString); const value1 = params.get('key1'); // 'value1'
• 예시 URL:

<http://example.com/search?q=react&sort=popular>

 

3. 주요 메서드

• append(name, value): 지정된 이름과 값을 가진 쿼리 매개변수를 추가
• delete(name): 지정된 이름의 쿼리 매개변수를 삭제
• get(name): 지정된 이름의 첫 번째 쿼리 매개변수 값을 반환
• getAll(name): 지정된 이름의 모든 쿼리 매개변수 값을 배열로 반환
• has(name): 지정된 이름의 쿼리 매개변수가 있는지 여부를 확인
• set(name, value): 지정된 이름의 쿼리 매개변수 값을 설정. 이미 해당 이름의 쿼리 매개변수가 있는 경우 기존 값을 대체.
• toString(): 현재 URLSearchParams 객체를 문자열로 반환.

 

4. 사용 예시

const params = new URLSearchParams('?name=John&age=25');

console.log(params.get('name')); // "John"
console.log(params.get('age')); // "25"

params.append('city', 'New York');
console.log(params.toString()); // "name=John&age=25&city=New%20York"

params.set('age', '30');
console.log(params.toString()); // "name=John&age=30&city=New%20York"

params.delete('name');
console.log(params.toString()); // "age=30&city=New%20York"

 

5. React에서의 사용

React에서는 URLSearchParams를 사용하여 URL의 쿼리 매개변수를 쉽게 처리할 수 있음 . 2가지 방법이 있음

 

5.1. useQuery 훅을 사용한 방법

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

const useQuery = () => {
  return new URLSearchParams(useLocation().search);
};

const MyComponent = () => {
  let query = useQuery();
  const searchTerm = query.get("q");

  return <div>검색어: {searchTerm}</div>;
};

query:

• query는 URLSearchParams 객체입니다. 이 객체는 URL의 쿼리 문자열을 쉽게 다룰 수 있도록 도와주는 API입니다.

 **let query = useQuery();**

• 정의: useQuery()는 React Router와 같은 라이브러리에서 제공하는 커스텀 훅
• 특징:
  • React Hook으로 구현
  • 이미 파싱된 URLSearchParams 객체 반환
  • React의 생명주기와 통합
  • 컴포넌트가 리렌더링될 때 자동으로 최신 값 유지

 

예시 1

// 현재 URL: <https://example.com/search?q=react>
let query = useQuery(); //리액트에 더 적합
const searchTerm = query.get("q");

console.log(searchTerm); // "react"

query.get("q")는 URL의 쿼리 매개변수에서 "q"라는 이름의 값을 가져와 searchTerm 변수에 저장

 

예시2

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useLocation } from 'react-router-dom';

// useQuery 훅 정의
const useQuery = () => {
  return new URLSearchParams(useLocation().search);
};

// 쿼리 파라미터를 사용하는 컴포넌트
const SearchComponent = () => {
  let query = useQuery();
  const searchTerm = query.get("q") || "없음"; // 기본값 설정

  return <div>검색어: {searchTerm}</div>;
};

// 메인 컴포넌트
const App = () => {
  return (
    <Router>
      <div>
        <h1>검색 페이지</h1>
        {/* 링크를 통해 쿼리 파라미터를 변경 */}
        <nav>
          <Link to="/search?q=react">React 검색</Link>
          <Link to="/search?q=vue">Vue 검색</Link>
          <Link to="/search?q=angular">Angular 검색</Link>
          <Link to="/search">검색어 없음</Link>
        </nav>

        <Switch>
          <Route path="/search" component={SearchComponent} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

• URL이 http://localhost:3000/search?q=react로 설정되면 화면에 "검색어: react"가 표시됨
• 사용자가 "Vue 검색" 링크를 클릭하면 URL이 http://localhost:3000/search?q=vue로 변경되고, 화면에 "검색어: vue"가 표시됨

 

5.2. window.location.search를 사용한 방법

const MyComponent = () => {
  const query = new URLSearchParams(window.location.search);
  const searchTerm = query.get("q");

  return <div>검색어: {searchTerm}</div>;
};

const query = new URLSearchParams(window.location.search);

• 정의: new URLSearchParams(window.location.search)는 브라우저의 전역 객체인 window를 사용하여 현재 URL의 쿼리 문자열을 가져와 파싱하는 방법.
• 특징:
  • 브라우저 API를 직접 사용
  • 문자열 형태로 전체 쿼리 문자열을 반환
  • React의 생명주기와 무관
  • 수동으로 파싱 필요

 

예시 1)

// URL이 "<http://example.com/search?q=react&page=1>" 일 때
console.log(window.location.search);  
// 출력: "?q=react&page=1"

// 쿼리 파라미터를 직접 파싱해야 함
const searchParams = new URLSearchParams(window.location.search);
const query = searchParams.get('q');  // "react"

 

예시 2 )

import React from 'react';

const MyComponent = () => {
  // window.location.search를 사용하여 현재 URL의 쿼리 문자열을 가져옵니다.
  const query = new URLSearchParams(window.location.search);
  //window.location.search는 "?q=react"를 반환.
  //new URLSearchParams(window.location.search)를 사용하여 쿼리 문자열을 파싱하고, 쿼리 매개변수에 쉽게 접근할 수 있는 객체를 생성

  // 'q'라는 이름의 쿼리 파라미터 값을 가져옵니다.
  const searchTerm = query.get("q");

  return (
    <div>
      {/* 쿼리 파라미터에서 검색어를 표시합니다. */}
      <h1>검색어: {searchTerm}</h1>
    </div>
  );
};

export default MyComponent;

이 컴포넌트를 React 애플리케이션에 추가하고, URL에 쿼리 파라미터 q를 포함시키면, 해당 값이 화면에 표시됨.

예를 들어, URL이 http://example.com/search?q=react일 경우, 화면에는 "검색어: react"가 표시됨.