React에서 URL 매개변수 가져오기

이 기사에서는 React에서 URL 매개변수를 얻는 세 가지 방법을 보여줍니다(React Router V5, V6 사용 및 사용 안 함).

React에서 URL 매개변수를 얻는 방법?

React에서 URL 매개변수를 얻는 가장 좋은 방법은 "React Router"라이브러리를 사용하는 것입니다. 일련의 기능 덕분에 애플리케이션의 경로를 관리하는 데 도움이 됩니다. 그러나 라우팅이 없는 간단한 애플리케이션이 있는 경우 내장URLSearchParams 인터페이스를 사용하여 쿼리 매개변수를 가져올 수 있습니다.

URL 구조

React 애플리케이션에서 URL 매개변수를 얻는 방법에 대해 자세히 알아보기 전에 URL 부분을 빠르게 살펴보겠습니다.

이 URL을 예로 사용하겠습니다: "https://my-website.com?type=cat&name=oscar ". 다른 URL 부분은 다음과 같습니다.

프로토콜: "https://"

도메인 이름: "mywebsite.com"

쿼리 매개변수 1:

이름: "유형"

값: "고양이"

쿼리 매개변수 2:

이름: "이름"

값: "오스카"

다음 섹션에서는 쿼리 매개변수 유형 및 이름을 가져오는 방법을 알아봅니다.

URLSearchParams 사용

이 첫 번째 예에서는 라우터가 없는 간단한 애플리케이션에 대한 React URL 매개변수를 얻습니다. 이는 아래에서 발견하게 될 것이 추가 라이브러리 없이(설치할 것이 없음) 모든 React 프로젝트에서 작동할 수 있음을 의미합니다.

작동하게 하려면 your browser’s Window interface 및 the URLSearchParams interface 을 사용해야 합니다.

다음은 작업 예입니다.

import React from "react"

export default function App() {
  const queryParameters = new URLSearchParams(window.location.search)
  const type = queryParameters.get("type")
  const name = queryParameters.get("name")

  return (
    <div>
      <p>Type: {type}</p>
      <p>Name: {name}</p>
    </div>
  )
}

위에서 볼 수 있듯이 현재 queryParameters를 매개 변수로 사용하여 새 URLSearchParams 인스턴스를 생성하여 window.location.search 변수를 초기화합니다.

URLSearchParams는 생성 시 전달된 매개변수( window.location.search )에서 쿼리를 추출하고 일련의 기능( get , getAll , has 등)을 제공합니다.

window.location.search는 URL( ?type=cat&name=oscar )의 검색어 매개변수 부분에 해당합니다.

애플리케이션의 렌더링 부분에서 URLSearchParams 개체의 type 함수 덕분에 두 개의 React URL 매개변수인 name 및 get() 를 표시합니다.

React 라우터 V6 사용

페이지가 많은 React에 더 복잡한 애플리케이션이 있는 경우 아마도 경로를 관리하기 위해 React Router을 사용하고 있을 것입니다. 이 라이브러리는 가장 널리 사용되는 솔루션이며 웹 사이트 URL을 관리하는 많은 기능을 가지고 있습니다.

이 섹션에서는 React Router 버전 6에 중점을 둘 것입니다. 아직 버전 5를 사용 중인 경우 솔루션이 다르기 때문에 다음 섹션으로 스크롤할 수 있습니다.

아래에서 예를 찾을 수 있습니다.

import React from "react"
import {
  Routes,
  Route,
  useParams,
  useSearchParams,
  BrowserRouter
} from "react-router-dom"

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/:name" element={<Home />} />
      </Routes>
    </BrowserRouter>
  )
}

function Home() {
  const [queryParameters] = useSearchParams()

  return (
    <div>
      <p>Type: {queryParameters.get("type")}</p>
      <p>Name: {queryParameters.get("name")}</p>
    </div>
  )
}

이 버전의 React Router에서는 모든 window 및 URLSearchParams 코드가 useSearchParams 라는 사용자 지정 후크로 래핑되었습니다.

직접 구현을 수행하는 것에 대해 걱정할 필요가 없으며 후크를 호출하고 후크에서 쿼리 매개변수를 추출하는 데 집중할 수 있습니다( const [queryParameters] = useSearchParams() ).

그런 다음 이전 예제와 동일한 방식으로 URL 매개 변수 값을 가져올 수 있습니다.

React 라우터 V5 사용

기사의 마지막 섹션에서는 React Router V5에서 URL 매개변수를 처리하는 방법을 보여드리겠습니다. 앞서 언급했듯이 코드는 V5와 V6 간에 약간 다릅니다.

React Router V5로 URL 매개변수를 얻는 방법은 다음과 같습니다.

import React from "react"
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation,
  useParams
} from "react-router-dom"

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/:name">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

function Home() {
  const location = useLocation()
  const queryParameters = new URLSearchParams(location.search)

  return (
    <div>
      <p>Type: {queryParameters.get("type")}</p>
      <p>Name: {queryParameters.get("name")}</p>
    </div>
  )
}

위에서 볼 수 있듯이 이 마지막 예는 window 및 URLSearchParams를 사용하는 첫 번째 접근 방식과 React Router만 사용하는 두 번째 접근 방식을 혼합한 것입니다.

V5로 URL 매개변수를 얻는 데 성공하려면 다음을 수행해야 합니다.

useLocation을 사용하여 현재 위치 개체를 가져옵니다.

location.search ( ?type=cat&name=oscar )를 사용하여 URL에서 쿼리 매개변수를 추출합니다.

은 URL 쿼리 매개변수를 URLSearchParams에 전달합니다.

Note: You may have noticed that the output of location.search is the same as window.location.search. It's because both are coming from the Window interface (window.location), and, more precisely, the Location interface.

읽어 주셔서 감사합니다. 연결하자!

➡️ 웹 개발로 성장할 수 있도록 돕고 Nomad 소프트웨어 엔지니어로서의 여정을 공유합니다. 🚀🎒