react router에서 useParams와 useSearchParams의 차이

useParams

url 경로에서 동적 세그먼트를 가져오는데 사용된다

url 경로 매개변수인 userId를 추출하여 UserProfile 컴포넌트에서 사용할 수 있다

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

function UserProfile() {
  const { userId } = useParams();
  return <div>User ID: {userId}</div>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:userId" element={<UserProfile />} />
      </Routes>
    </Router>
  );
}

export default App;

 

url이 /user/123 인 경우, 

useParams는 {userId: '123'} 을 반환한다

 

useSearchParams

현재 위치에 대한 url의 쿼리 문자열을 읽고, 처리하는데 사용된다

쿼리 문자열은 url의 '?' 뒤에 이있는 부분으로 일반적으로 key-value 쌍으로 이루어진다

 

useSearchParams는 useState와 마찬가지로 현재 위치의 search params와 이를 업데이트하는 함수 2가지를 반환한다

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

function SearchResults() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('query');
  return <div>Search Query: {query}</div>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/search" element={<SearchResults />} />
      </Routes>
    </Router>
  );
}

export default App;

 

url이 '/search?query=react'인 경우, URLSearchParams 객체를 반환한다

이때 get, set, has, delete 메소드를 통해 쿼리 매개변수에 접근할 수 있다

 

• get(name: string): 쿼리 매개변수의 값을 가져옵니다.
• set(name: string, value: string): 쿼리 매개변수의 값을 설정합니다.
• has(name: string): 쿼리 매개변수가 존재하는지 확인합니다.
• delete(name: string): 쿼리 매개변수를 삭제합니다.