리액트-URL 관련 개념 (useSearchParams)

심영민·2025년 4월 23일
리액트유레카프론트엔드
0

유레카

목록 보기
28/33

웹 개발 시 주소(URL)를 다루는 것은 필수적이다.. (동적인 웹 애플리케이션에서는 URL의 특정 부분을 읽거나 수정해야 하는 경우가 많으니까)

이를 위해 이번 포스트에서는 JavaScript와 React Router에서 제공하는 주요 도구들을 정리해보겠다.

URL 객체: 웹 주소의 구조적 접근

개념

  • JavaScript 내장 객체로, URL 문자열을 구성 요소별로 분해하여 쉽게 다룰 수 있게 해주는 도구임.
  • 프로토콜, 호스트, 경로, 쿼리 등을 개별적으로 접근하고 수정 가능함.

주요 구성 요소



https://www.example.com:8080/path/to/page?name=value&search=test#section
└─┬─┘   └─────┬─────┘ └─┬──┘└─────┬─────┘└───────┬─────────────┘└──┬──┘
프로토콜     호스트     포트      경로        쿼리 매개변수    해시(프래그먼트)
  • protocol: 'https:'
  • hostname: 'example.com'
  • port: '8080'
  • pathname: '/path'
  • search: '?name=value'&search=test
  • hash: '#section'
  • origin: 'https://example.com:8080'
  • href: 전체 URL 문자열

기본 사용법: 생성 및 속성 접근

// URL 객체 생성
const myUrl = new URL('[https://store.example.com/products?id=123](https://store.example.com/products?id=123)');

// 속성 접근
console.log(myUrl.hostname); // 'store.example.com'
console.log(myUrl.pathname); // '/products'
console.log(myUrl.search);   // '?id=123'

URL 수정: 속성 변경


const modifiableUrl = new URL('[https://example.com/user](https://example.com/user)');

// 경로 변경
modifiableUrl.pathname = '/profile';
console.log(modifiableUrl.href); // '[https://example.com/profile](https://example.com/profile)'

// searchParams를 이용해 쿼리 파라미터 추가/수정
modifiableUrl.searchParams.set('mode', 'edit'); // ?mode=edit 추가
console.log(modifiableUrl.href); // '[https://example.com/profile?mode=edit](https://example.com/profile?mode=edit)'

상대 URL 처리: 기준 URL과 결합

const baseUrl = new URL('[https://api.example.com/v1/](https://api.example.com/v1/)');
const userApiUrl = new URL('users/1', baseUrl); // 상대 경로 결합
console.log(userApiUrl.href); // '[https://api.example.com/v1/users/1](https://api.example.com/v1/users/1)'

URLSearchParams 객체

URLSerachParams 객체는 이제 쿼리문자열에 쉽게 접근하여 조작하게하는 치트키 도구라고 생각하면 된다.

개념

  • URL의 search 부분 ?key=value&...을 쉽게 다루기 위한 객체임.
  • 파라미터 읽기, 추가, 수정, 삭제 메서드를 제공함.

생성 방법

// 1. 문자열로 생성
const params1 = new URLSearchParams('q=js&sort=popular');

// 2. 객체로 생성
const params2 = new URLSearchParams({ page: '1', limit: '10' });

// 3. URL 객체에서 얻기
const url = new URL('[https://example.com/?type=image](https://example.com/?type=image)');
const params3 = url.searchParams; // URLSearchParams 객체
console.log(params3.get('type')); // 'image'

주요 메서드: 파라미터 조작

const params = new URLSearchParams('category=books');

// 값 가져오기 (get)
console.log(params.get('category')); // 'books'

// 파라미터 존재 확인 (has)
console.log(params.has('category')); // true

// 파라미터 추가 (append)
params.append('lang', 'en'); // category=books&lang=en

// 파라미터 설정 (set) - 덮어쓰거나 추가
params.set('category', 'web'); // category=web&lang=en

// 파라미터 삭제 (delete)
params.delete('lang'); // category=web

// 문자열로 변환 (toString)
console.log(params.toString()); // 'category=web'

API 요청 쿼리 생성 (자주 쓰임)

// 검색 조건
const options = { query: 'React', limit: 5 };
const apiUrl = new URL('[https://api.example.com/search](https://api.example.com/search)');

// 조건 객체를 쿼리 파라미터로 추가
Object.entries(options).forEach(([key, value]) => {
  apiUrl.searchParams.append(key, value);
});

console.log(apiUrl.href); 

// '[https://api.example.com/search?query=React&limit=5](https://api.example.com/search?query=React&limit=5)'

useSearchParams : React 컴포넌트에서 URL 파라미터 다루기

개념

  • React Router v6 라이브러리에서 제공하는 훅(Hook)임.
  • React 컴포넌트 내에서 URL 쿼리 파라미터를 쉽게 읽고 업데이트함.
  • 브라우저 URL과 컴포넌트 상태를 동기화함.
  • 반환값: 상태와 상태 변경 함수
import { useSearchParams } from 'react-router-dom';

function MyComponent() {
  // searchParams: 읽기용 URLSearchParams 인스턴스
  // setSearchParams: URL 업데이트 함수
  const [searchParams, setSearchParams] = useSearchParams();
  // ...
}

주요 특징

  • 읽기: searchParams.get('param') 사용.
  • 쓰기: setSearchParams({ key: 'value' }) 호출 시 URL 변경 및 리렌더링.
  • 동기화: URL 변경 시 searchParams 자동 업데이트.
  • 사용 사례
    • 필터링, 페이지네이션, 검색어 유지 등 URL에 상태를 반영해야 할 때 유용함.
    • 북마크, 공유, 브라우저 히스토리 탐색 가능.

간단 필터링 예시코드

import React from 'react';
import { useSearchParams } from 'react-router-dom';

function SimpleFilter() {
  const [searchParams, setSearchParams] = useSearchParams();
  const filter = searchParams.get('filter') || 'all'; // 'filter' 값 읽기

  const handleFilterChange = (newFilter) => {
    // setSearchParams로 URL 업데이트 (?filter=값)
    // 참고: 객체를 전달하면 해당 키만 남기고 나머지는 제거될 수 있음
    // 기존 파라미터 유지가 필요하면 new URLSearchParams(searchParams)로 복사 후 조작
    setSearchParams({ filter: newFilter });
  };

  return (
    <div>
      <button onClick={() => handleFilterChange('active')}>활성</button>
      <button onClick={() => handleFilterChange('completed')}>완료</button>
      <button onClick={() => handleFilterChange('all')}>전체</button>
      <p>현재 필터: {filter}</p>
      {/* 필터된 데이터 표시 로직 */}
    </div>
  );
}

export default SimpleFilter;

그럼 리액트에선 useSearchParams로 URL에 거의 접근하냐?

-> ㅇㅇ

React Router를 사용하는 현대적인 React 애플리케이션에서는 URL 쿼리 파라미터를 컴포넌트 내에서 다룰 때, 주로 useSearchParams 훅을 사용하는 것이 표준적인 방법이다.

  1. React 상태 및 렌더링과의 통합: useSearchParams 훅은 쿼리 파라미터의 변경을 React의 상태 관리 및 렌더링 사이클과 자연스럽게 통합시켜 줌. setSearchParams 함수를 호출하면 URL이 변경될 뿐만 아니라, 해당 변경 사항을 감지하고 관련 컴포넌트가 자동으로 다시 렌더링됨.

  2. React Router와의 연동: React Router는 클라이언트 사이드 라우팅을 관리함. setSearchParams는 단순히 URL을 바꾸는 것을 넘어 React Router의 네비게이션 메커니즘과 연동되어 브라우저 히스토리 스택을 올바르게 관리함 (뒤로 가기/앞으로 가기 동작).

  3. 편의성: 훅을 사용하면 URLSearchParams 객체를 직접 생성하거나 window.location을 수동으로 파싱할 필요 없이, 현재 URL의 쿼리 파라미터에 쉽게 접근하고 업데이트할 수 있는 인터페이스([searchParams, setSearchParams])를 제공받음.

-> 그렇다고 URLSearchParams를 아예 안 쓰는 것은 아님

  1. useSearchParams 훅 자체가 반환하는 searchParams 객체가 바로 URLSearchParams의 인스턴스임. 따라서, 파라미터 값을 읽거나(searchParams.get('key')), 특정 키가 있는지 확인할 때(searchParams.has('key'))는 결국 URLSearchParams의 메서드를 사용하게 됨.

  2. React 컴포넌트 외부에서 URL 문자열을 직접 다뤄야 할 때는 여전히 네이티브 URLSearchParams 객체를 직접 생성해서 사용할 수 있음.

profile
심영민
코딩너무어려운대 어떡할과 재학중
이전 포스트

리액트 - 라우터와 코드 스플리팅

다음 포스트

리액트 - loader를 통해 라우터의 흐름 이해

0개의 댓글