[React] URL 파라미터와 쿼리스트링

다음 내용은 책 '리액트를 다루는 기술'을 바탕으로 공부한 내용으로 작성된 글입니다.

---

페이지 주소를 정의할 때는 가끔 유동적인 값을 사용해야 할 때도 있다.

 

❕ URL 파라미터

예시 : /profile/velopert

- 주소의 경로에 유동적인 값을 넣는 형태.

- 주로 id 또는 이름을 사용하여 특정 데이터를 조회할 때 사용.

 

 ❕ 쿼리스트링

예시 : /article?page=1&keyword=react

- 주소의 '?' 이후에 key=value로 값을 정의,  &로 구분하는 형태.

- 주로 키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용

 

 

URL 파라미터 사용

 

URL 파라미터는 useParams 라는 Hook을 사용하여 객체 형태로 조회 가능하다.

 

👉 useParams 

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

const Profile = () => {
	const params = useParams();
    {/* useParams Hook 사용 */}
    {/* URL 파라미터로 넘어온 정보를 얻어 그에 맞는 데이터를 보여준다 */}
    
.. }

 

URL 파라미터는 라우트의 path에서 /profiles/:username 과 같이 경로에 :를 사용하여 설정한다.

만약 URL 파라미터가 여러 개인 경우에는 /profiles/:username/:field 와 같은 형태로 설정할 수 있다.

 

 

쿼리스트링 사용

쿼리스트링을 사용할 때는 URL 파라미터와 달리 Route 컴포넌트를 사용할 때 별도로 설정할 것이 없다.

 

👉 useLocation 

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

const About = () => {
	const location = useLocation();
    
    return (
    	<div>
        	<p> 쿼리스트링 : {location.search} </p>
    	</div>
    );
};

 

위 컴포넌트에서는 useLocation 이라는 Hook을 사용했다.

useLocation은 location 객체를 반환하는데, 이 객체는 현재 사용자가 보고 있는 페이지의 정보를 지니고 있다.

 

 

➰ useLocation() 의 location 객체가 가진 값

pathname	현재 주소의 경로 (쿼리스트링 제외)
search	맨 앞의 ? 문자를 포함한 쿼리스트링
hash	주소의 # 문자열 뒤의 값 (주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용)
state	페이지로 이동할 때 임의로 넣을 수 있는 상태 값
key	location 객체의 고유값, 초기에는 default이며 페이지가 변경될 때마다 고유의 값이 생성됨

 

 

이처럼 쿼리스트링 값은 location.search 값으로 얻을 수 있다.

얻은 문자열에서 ? 를 지우고 & 로 분리한 뒤 key와 value를 파싱하는 작업을 해야 데이터를 얻을 수 있다.

이 작업은 보통 npm에서 qs 또는 querystring 패키지를 설치해 처리할 수 있지만, 리액트 라우터에서는 v6부터 

useSearchParams 라는 Hook을 통해서 이를 더욱 쉽게 다룰 수 있게 되었다.

 

👉 useSearchParams 사용 예제

import React from "react";
import { useLocation, useSearchParams } from "react-router-dom";

const About = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const detail = searchParams.get("detail");
  const mode = searchParams.get("mode");

  const onToggleDetail = () => {
    setSearchParams({ mode, detail: detail === "true" ? false : true });
  };

  const onIncreaseMode = () => {
    const nextMode = mode === null ? 1 : parseInt(mode) + 1;
    setSearchParams({ mode: nextMode, detail });
  };

  const location = useLocation();
  return (
    <div>
      <h1>소개</h1>
      <p>리액트 라우터를 사용해보는 프로젝트 입니다.</p>
      <p>detail: {detail} </p>
      <p>mode: {mode}</p>
      <button onClick={onToggleDetail}>Toggle datail</button>
      <button onClick={onIncreaseMode}> mode + 1</button>
    </div>
  );
};

export default About;

 

useSearchParams는 배열 타입의 값을 반환한다.

첫 번째 원소는 '쿼리파라미터를 조회/ 수정하는 메서드들이 담긴' 객체이다.

get 메서드를 통해 특정 쿼리파라미터를 조회할 수 있고,

set 메서드를 통해 특정 쿼리파라미터를 업데이트할 수 있다.

만약, 조회 시 쿼리파라미터가 존재하지 않는다면 null로 조회된다.

두 번째 원소는 '쿼리파라미터를 객체 형태로 업데이트할 수 있는' 함수를 반환한다. ( useState의 두 번째 요소와 비슷한 set 함수)

  

 

이 때 주의할 점은 쿼리파라미터를 조회할 때 값은 무조건 문자열 타입이라는 점이다. 즉, true 또는 false 값을 넣는다면 값을 비교할 때 반드시 'true'와 같이 따옴표를 감싸서 비교를 해야 하고, 숫자를 다룬다면 parseInt를 사용하여 숫자 타입으로 변환을 해야 한다.