React에서 쿼리 매개변수를 업데이트하는 방법

쿼리 매개변수는 URL 끝에 추가할 수 있는 이름/값 쌍입니다. 해당 URL에 데이터를 저장할 수 있습니다.

쿼리 매개변수의 실용적인 응용 프로그램 중 하나는 사용자 검색의 값을 저장하는 것입니다.

React 라우터를 사용하여 쿼리 매개변수 업데이트

사용자가 검색창에 쿼리를 입력하면 해당 쿼리를 URL에 저장해야 합니다. 예를 들어 사용자가 블로그 목록에서 “반응” 범주의 게시물을 검색한 경우 업데이트된 URL은 /posts?tag=react 와 같아야 합니다 .

React는 쿼리 문자열을 읽거나 업데이트하는 데 도움이 되는 useSearchParams 후크를 제공합니다.

시작하려면 App.js에서 검색 표시줄을 만드세요.

import { useState } from "react";
export default function App() {
  const [query, setquery] = useState('')
  const handleChange = (e) => {
    setquery(e.target.value)
  };
  return (
    <div>
      <form role="search">
        <input onChange={handleChange} value={query} type="search" />
      </form>
    </div>
  );
}

React를 최대한 활용하려면 모범 사례를 따라야 합니다.

다음으로 React 라우터를 설치하고 애플리케이션에 라우팅을 추가합니다. useSearchParams 후크가 작동하려면 필수입니다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);


이제 handleChange() 함수를 수정하여 사용자 유형으로 URL에 쿼리를 저장할 수 있습니다.

import { useState } from "react";
import { useSearchParams } from "react-router-dom";


export default function App() {
  const [query, setquery] = useState("");
  const [searchParams, setSearchParams] = useSearchParams({});

  const handleChange = (e) => {
    setSearchParams({ query: e.target.value });
    setquery(e.target.value);
  };
  return (
    <div>
      <form role="search">
        <input onChange={handleChange} value={query} type="search" />
      </form>
    </div>
  );
}


URL에서 쿼리 값 가져오기

searchParams.get()을 사용하고 쿼리 매개변수의 이름을 전달하여 단일 쿼리 값을 가져올 수 있습니다.

const [searchParams, setSearchParams] = useSearchParams({});
const value = searchParams.get('tag')


모든 쿼리 매개변수를 가져오려면 searchParams.entries()를 사용하세요.

const [searchParams, setSearchParams] = useSearchParams({});
const values = searchParams.entries()


이 메서드는 키/값 쌍을 사용하여 반복할 수 있는 반복자를 반환합니다.

for (const [key, value] of values) {
    console.log(`${key}, ${value}`);
}


키/값 쌍은 URL에 나타나는 순서대로입니다.

쿼리 매개변수를 사용하여 검색 결과의 공유 가능성 향상

useSearchParams 후크는 검색 값 또는 기타 데이터를 URL의 쿼리 매개변수로 저장하는 데 적합합니다.

useState 후크로 검색 값을 추적할 수도 있지만 쿼리 매개변수에 저장하면 사람들이 URL을 통해 공유할 수 있습니다.