React에서 쿼리 매개변수 및 URL 매개변수를 얻는 방법

예제로 이동하기 전에 먼저 쿼리 매개변수와 URL 매개변수의 차이점을 이해합니다.

URL을 고려하십시오: https://example.com/search?term=pizza
여기서 term는 쿼리 매개변수(또는 검색 매개변수)이며 값은 pizza입니다. URL 매개변수는 키-값 쌍으로 나타납니다.

그렇다면 URL 매개변수는 무엇입니까? URL 매개변수는 URL에서 ? 앞에 표시되는 매개변수입니다.
https://example.com/orders/10001
위 URL에서 10001는 URL 매개변수입니다. URL 매개변수에는 값이 속한 키에 대한 명시적인 언급이 없습니다. URL의 위치 또는 형식에 따라 무엇10001이 나타내는지 결정하는 것은 코드에 달려 있습니다. 물론 사람의 입장에서 URL을 읽으면 orderId를 나타내는 것으로 이해하게 됩니다.

쿼리 매개변수 읽기

location.search를 사용하여 URL의 쿼리 부분을 검색할 수 있습니다.
즉, 내가 https://example.com/search?term=pizza&location=Bangalore 페이지에 있으면 location.search를 호출하면 ?term=pizza&location=Bangalore가 반환됩니다.

하지만 여기서 키-값 쌍을 어떻게 추출합니까? 그때 URLSearchParams이 등장합니다.

URLSearchParams 사용

URLSearchParams는 쿼리 매개변수를 구문 분석하고 액세스하는 데 도움이 됩니다.
다음 코드를 사용하여 term 값을 얻을 수 있습니다.

const queryParams = new URLSearchParams("?term=pizza&location=Bangalore")
const term = queryParams.get("term")
console.log(term) //pizza

아래 코드와 같이 쿼리 매개변수를 반복할 수 있습니다.

const queryParams = new URLSearchParams("?term=pizza&location=Bangalore")
for (const [key, value] of queryParams) {
  console.log({ key, value }) // {key: 'term', value: 'pizza'} {key: 'location', value: 'Bangalore'}
}

아래와 같이 반응 구성 요소에서 이것을 사용할 수 있습니다.

function App() {
  const queryParams = new URLSearchParams(window.location.search)
  const term = queryParams.get("term")
  const location = queryParams.get("location")

  return (
    <div className="App">
      <p>Value of term: {term}</p>
      <p>Value of location: {location}</p>
    </div>
  )
}

export default App

이제 http://localhost:3000/?term=pizza&location=Bangalore 를 열면 용어와 위치가 표시됩니다.

query-params 패키지 사용

query-string 라이브러리를 사용하여 동일한 결과를 얻을 수 있습니다. 먼저 다음 명령(또는 npm i query-string )을 사용하여 query-string을 설치합니다.

yarn add query-string

아래와 같이 React에서 사용할 수 있습니다.

import queryString from "query-string"

function App() {
  const queryParams = queryString.parse(window.location.search)

  return (
    <div className="App">
      <p>Value of term: {queryParams.term}</p>
      <p>
        All query params <pre>{JSON.stringify(queryParams, null, 2)}</pre>
      </p>
    </div>
  )
}

export default App

이제 애플리케이션을 실행하면 쿼리 매개변수가 출력되는 것을 볼 수 있습니다.



query-string 사용의 이점은 JavaScript 객체를 반환하고 additional features 을 갖는다는 것입니다.

반응 라우터 사용

애플리케이션에서 라우팅을 위해 React Router를 사용하는 경우 useSearchParams 후크를 사용할 수 있습니다.

먼저 다음 명령을 사용하여 프로젝트에 React Router를 설치합니다.

yarn add history@5 react-router-dom@6

index.js 에서 BrowserRouter 구성 요소를 가져와 앱 구성 요소 주위에 래핑합니다.

import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
)

다음 코드를 사용하여 Search라는 구성 요소를 만듭니다.

import React from "react"
import { useSearchParams } from "react-router-dom"

const Search = () => {
  let [searchParams, setSearchParams] = useSearchParams()
  const term = searchParams.get("term")
  const location = searchParams.get("location")

  return (
    <div className="App">
      <p>Value of term: {term}</p>
      <p>Value of location: {location}</p>
    </div>
  )
}

export default Search

여기서는 useSearchParams를 사용하여 쿼리 매개변수를 검색합니다. URLSearchParams는 내부적으로 useSearchParams를 사용하므로 검색 매개변수에 접근하는 방법은 URLSearchParams와 동일하다.

마지막으로 App.js에서 Search 구성 요소에 대한 경로를 만듭니다.

import { Routes, Route } from "react-router-dom"
import Search from "./Search"

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="search" element={<Search />} />
      </Routes>
    </div>
  )
}

export default App

이제 http://localhost:3000/search?term=pizza&location=Bangalore 을(를) 열면 검색 매개변수가 인쇄된 것을 볼 수 있습니다.

You can learn more about react router in my previous article

URL 매개변수 읽기

URL 매개 변수에는 명시적인 키가 지정되어 있지 않으므로 액세스하려면 반응 라우터와 같은 라이브러리를 사용해야 합니다. useParams 후크를 사용하여 URL 매개변수에 액세스할 수 있습니다.

반응 라우터를 사용하는 프로젝트에서 Order라는 구성 요소를 만듭니다.

import { useParams } from "react-router-dom"

export default function Order() {
  let params = useParams()
  return <h2>Order: {params.orderId}</h2>
}

이제 경로order/:orderId로 경로 정의를 업데이트합니다.

import { Routes, Route } from "react-router-dom"
import Order from "./Order"

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="order/:orderId" element={<Order />} />
      </Routes>
    </div>
  )
}

export default App

경로 정의의 :orderId와 orderId의 params.orderId가 일치해야 합니다.

이제 http://localhost:3000/order/10001을 열면 주문 ID가 표시되는 것을 볼 수 있습니다.



프로그래밍 방식으로 라우팅하는 방법을 배우려는 경우 자세한 내용을 읽을 수 있습니다here.