[React.js] URL의 파리미터(Parameter) 값 가져오기

URL의 파리미터(Parameter) 값 가져오기

들어가며

• 리액트(React.js)에서 URL의 파라미터(Parameter) 값을 가져오는 방법을 정리해본다.

 

파라미터(Parameter)

개념

• URL 경로의 일부분으로, 주로 특정 리소스를 식별하는 데 사용된다.
• RESTful API 설계에서 흔히 사용되며, 리소스의 고유 식별자를 나타낸다.
• URL 파라미터를 사용하면 동적인 경로를 생성할 수 있어, 다양한 리소스에 대해 동일한 컴포넌트를 재사용할 수 있다.

 

종류

종류	설명
경로 파라미터 (Path Parameter)	- 특정 리소스를 식별하는 데 사용 - 예: @/users/:userId@
쿼리 파라미터 (Query Parameter)	- URL의 @?@ 뒤에 위치하며, @키-값@ 쌍으로 다양한 옵션을 전달한다. - 예) @?search=react&sort=asc@
해시 (Fragment Identifier)	- URL의 @#@ 뒤에 위치 - 페이지 내 특정 섹션으로 이동하거나 클라이언트 측 상태를 관리하는 데 사용 - 예) @#section1@

ⓒ dmitripavlutin.com

 

사용 시 주의사항

• URL에 포함되는 모든 파라미터는 적절히 인코딩되어야 한다. (특수 문자나 공백은 @%@로 인코딩된다.)
• URL은 브라우저 기록, 서버 로그 등에 저장될 수 있기 때문에 민감한 정보를 URL 파라미터에 포함시키지 않는다.
• URL 길이는 브라우저 및 서버에 따라 제한될 수 있으므로, 너무 많은 데이터를 파라미터로 전달하지 않도록 한다.
• 경로 파라미터를 정의할 때는 정확한 라우트 경로를 설정하여 예상치 못한 라우팅 오류를 방지해야 한다.

 

파라미터 값 가져오는 방법

① URL 객체 이용하기

• @URL@ 객체를 이용하여 파라미터 값들을 가져올 수 있다.
• URL이 @https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=helloworld@일 때, 개발자 도구에서 URL 객체의 내용을 확인해보면 아래와 같다.

 

경로 파라미터(/value) 값 가져오기

• 현재 페이지의 URL을 불러온 후, URL 객체로 변환 후, URL 객체의 @pathname@ 속성을 이용하여 경로 정보를 불러온다.
• 그리고 @split()@ 메서드를 이용하여 분할시켜 준다.
  • @window.location.href@를 이용하여 현재 페이지의 URL을 가져올 수 있다.
  • @URL().pathname@을 이용하여 문자열 형태의 경로 정보를 가져올 수 있다.

const url = new URL(window.location.href); // 현재 URL 객체 생성
const pathSegments = url.pathname.split('/'); // 경로를 '/'로 나누어 배열로 만든다. (['', 'user', '123'])

// 경로 파라미터 가져오기
const userId = pathSegments[2]; // 예) '/user/123'에서 '123'을 가져온다.

 

window.location.href를 이용하여 현재 페이지의 URL을 가져올 수 있다.

 

쿼리 파라미터(?key=value)  값 가져오기

• @URLSearchParams()@을 사용하여 쿼리 파라미터 목록(@URLSearchParams@ 객체)을 가져올 수 있다. 
  • 또는 URL 객체의 @searchParams@ 속성을 이용하여 가져올 수 있다.
• @get(key)@을 이용하여 특정 파라미터(@key@)의 값을 가져올 수 있다. 

// URL 객체 생성하기
const urlString = 'https://example.com/page?search=hi&sort=asc&page=2';
const url = new URL(urlString);

// 쿼리 파라미터 가져오기
const searchParams = new URLSearchParams(url.search);  // 방법 1
// const searchParams = url.searchParams;              // 방법 2

// 모든 쿼리 파라미터 키-값 확인해보기
searchParams.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// 특정 파라미터 값 가져오기
const searchValue = searchParams.get('search'); // "hi"
const sortValue = searchParams.get('sort'); // "asc"
const pageValue = searchParams.get('page'); // "2"

 

• 다음과 같이 @set(key, value)@을 이용하여 쿼리 파라미터 값을 추가하거나 수정할 수 있다.
  • 쿼리 파라미터 값 목록에 없는 키-값을 @set@하면 새로운 값을 추가한다.
  • 쿼리 파라미터 값 목록에 있는 키-값을 @set@하면 해당 값을 수정한다.

// 쿼리 파라미터 추가
searchParams.set('filter', 'newFilter');

// 쿼리 파라미터 수정
searchParams.set('sort', 'desc');

console.log(searchParams.toString()); // "search=hi&sort=desc&page=2&filter=newFilter"

 

• 다음과 같이 @delete(key)@를 이용하여 특정 쿼리 파라미터를 삭제할 수 있다.

searchParams.delete('page');

console.log(searchParams.toString()); // "search=hi&sort=desc&filter=newFilter"

 

해시 값(#value) 가져오기

• @hash@를 사용하여 해시(@#@) 값을 가져올 수 있다.

const urlString = 'https://example.com/page#section1';
const url = new URL(urlString);

// 해시 값 가져오기
const hash = url.hash; // "#section1"
const hashWithoutHash = hash.slice(1); // "section1" (해시 기호를 제외한 값)

 

② 리액트 라우터(React Router) 이용하기

• 리액트 라우터(React Router)의 @useParams@ 훅을 이용하여 URL 경로 파라미터, 쿼리 파라미터 값을 가져올 수 있다.

 

경로 파라미터(/value)  값 가져오기 : @useParams@

• 리액트 라우터의 @useParams@ 훅을 이용하여 경로 파라미터 값을 가져올 수 있다.

import { BrowserRouter as Router, Route, useParams } from 'react-router-dom';

const User = () => {
  const { userId } = useParams(); // URL에서 userId 파라미터 가져오기
  return <h1>User ID: {userId}</h1>;
};

const App = () => (
  <Router>
    <Route path="/user/:userId" component={User} />
  </Router>
);

 

쿼리 파라미터(?key=value) 값 가져오기 : @useSearchParams@ / @useLocation@

• 리액트 라우터 v6.4 이상에서 제공하는 @useSearchParams@ 훅을 이용하여 쿼리 파라미터 값을 가져올 수 있다.
• @setSearchParams@를 이용하여 현재 쿼리 파라미터 값을 수정할 수 있다.

import { BrowserRouter as Router, Route, Routes, useSearchParams } from 'react-router-dom';

const SearchComponent = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const paramValue = searchParams.get('paramName'); // 'paramName' 쿼리 파라미터 값 가져오기

  // 쿼리 파라미터 업데이트
  const updateParam = () => {
    setSearchParams({ paramName: 'newValue' }); 
  };

  return (
    <div>
      <h1>현재 쿼리 파라미터: {paramValue}</h1>
      <button onClick={updateParam}>쿼리 파라미터 업데이트하기</button>
    </div>
  );
};

const App = () => (
  <Router>
    <Routes>
      <Route path="/search" element={<SearchComponent />} />
    </Routes>
  </Router>
);

 

• 리액트 라우터 v6.4 미만은 아래와 같은 방법으로 쿼리 파라미터 값들을 가져올 수 있다.
  • @useLocation@ 훅과 @URLSearchParams()@를 함께 사용하는 방법이다.
    • @useLocation@ 훅을 이용하여 현재 URL을 가져온다.
    • @URLSearchParams()@를 이용하여 쿼리 파라미터 값 목록을 가져온다.

// React Router v6.3 or lower
import { useLocation } from 'react-router-dom';

const QueryComponent = () => {
  const location = useLocation();
  const query = new URLSearchParams(location.search);
  const paramValue = query.get('paramName'); // 'paramName'에 해당하는 쿼리 파라미터 값 가져오기

  return <h1>Query Parameter: {paramValue}</h1>;
};

 

해시 파라미터(#value) 값 가져오기 : @useLocation@

• 리액트 라우터의 @useLocation@ 훅의 @hash@ 속성을 이용하여 해시 파라미터 값을 가져올 수 있다.

import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';

const HashComponent = () => {
  const location = useLocation(); // 현재 위치 정보 가져오기
  const hashValue = location.hash; // 해시 값 가져오기

  return (
    <div>
      <h1>Current Hash: {hashValue}</h1>
    </div>
  );
};

const App = () => (
  <Router>
    <Routes>
      <Route path="/example" element={<HashComponent />} />
    </Routes>
  </Router>
);

export default App;

 

로더(Loader)를 이용하여 경로/쿼리/해시 파라미터 값 가져오기

• 리액트 라우터 v6.4 이상에서 제공하는 로더(Loader)를 이용하여 경로 파라미터, 쿼리 파라미터, 해시 파라미터 값을 가져올 수 있다.
  • 로더(Loader)는 특정 경로에 대해 데이터를 비동기적으로 가져오는 기능을 제공하며, 가져온 데이터는 컴포넌트가 렌더링되기 전에 사용할 수 있다.
• 로더 함수의 @params@ 인자를 통해 경로 파라미터를 가져올 수 있고, @request@ 인자를 통해 쿼리 파라미터와 해시 파라미터를 가져올 수 있다.
  • 쿼리 파라미터와 해시 파라미터는 @URL@ 객체를 이용하여 가져올 수 있다.

import {
  BrowserRouter as Router,
  Route,
  Routes,
  useLoaderData,
  useLocation,
} from 'react-router-dom';

// 데이터 로더 함수
const loader = async ({ params, request }) => {
  // (1) 경로 파라미터 가져오기
  const { userId } = params;

  // (2) 쿼리 파라미터 가져오기
  const url = new URL(request.url);
  const queryParams = Object.fromEntries(url.searchParams);   // [{key1: value2}, ..., {keyN: valueN}] 형태로 변환
  
  // 해시 파라미터 가져오기
  const hashValue = url.hash;

  return { userId, queryParams, hashValue }; // 가져온 데이터를 반환
};

const HashComponent = () => {
  const { userId, queryParams, hashValue } = useLoaderData();    // 로더에서 가져온 데이터 불러오기
  const location = useLocation();    // 현재 위치 정보 가져오기

  return (
    <div>
      <h1>User ID: {userId}</h1>
      <h2>Query Parameters: {JSON.stringify(queryParams)}</h2>
      <h3>Current Hash: {hashValue}</h3>
    </div>
  );
};

const App = () => (
  <Router>
    <Routes>
      <Route path="/user/:userId" element={<HashComponent />} loader={loader} />
    </Routes>
  </Router>
);

export default App;

 

 

참고 사이트

URL - Web APIs | MDN

URL.searchParams - Web API | MDN

URLSearchParams - Web API | MDN

useSearchParams | React Router

useParams | React Router

loader | React Router

useLocation | React Router