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

쿼리 매개변수를 활용하여 사용자 친화적인 앱을 만듭니다.

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

쿼리 매개변수를 실제로 적용하는 방법 중 하나는 사용자 검색의 값을 저장하는 것입니다.

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

사용자가 검색창에 검색어를 입력하면 해당 검색어를 URL에 저장해야 합니다. 예를 들어, 사용자가 블로그 목록에서 "react" 카테고리의 게시물을 검색한 경우 업데이트된 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>
);

이제 handlerChange() 함수를 수정하여 사용자 유형에 따라 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을 통해 해당 값을 공유할 수 있습니다.