[SPA] - useParams, useSearchParams

Donggu(oo)·2023년 2월 14일

목록 보기

6/30

1. useParams

리액트 라우터 라이브러리에서 동적라우팅을 위해 제공하는 함수로, Route path 와 일치하는 현재 URL에서 동적 매개변수의 키/값 쌍의 개체를 반환한다.
예를 들어, 게시판의 특정 게시글 클릭 시 해당 게시글의 상세 페이지로 이동할 때 사용된다.

기본 구문

const params = useParams();

fetch (`http://localhost:3001/blogs/${params.id}`)

1) path parameter 설정

상위 컴포넌트(파일)에서 Route의 path 속성에 콜론(:)으로 경로/:작명한 임의의 이름문자열 형태로 설정한다.

<BrowserRouter>
  <div className="app">
    <div className="content">
      <Routes>
        <Route exact path="/" element={<Home blogs={blogs} isPending={isPending} />} />
        <Route path="/blogs/:id" element={<BlogDetails getBlogs={getBlogs} />} />
      </Routes>
    </div>
  </div>
</BrowserRouter>

2) 변수에 할당 및 적용

하위 컴포넌트(파일)에서는 React Router에서 useParams를 import 해온 후, 사용하기 쉽도록 useParams() 함수를 변수에 할당한다.

import { useParams } from 'react-router-dom';

const params = useParams();

useEffect(() => {
  const getDetailBlog = async () => {
    const res = await axios.get(`http://localhost:3001/blogs/${params.id}`)
    setBlogs(res.data)
  };
  getDetailBlog();
}, []);

const handleDeleteClick = async () => {
  const res = await axios.delete(`http://localhost:3001/blogs/${params.id}`)
  getBlogs(res)
  navigate('/');
}

또는 구조 분해 할당으로 가져올 수도 있다.

import { useParams } from 'react-router-dom';

let { id } = useParams();

useEffect(() => {
  const getDetailBlog = async () => {
    const res = await axios.get(`http://localhost:3001/blogs/${id}`)
    setBlogs(res.data)
  };
  getDetailBlog();
}, []);

const handleDeleteClick = async () => {
  const res = await axios.delete(`http://localhost:3001/blogs/${id}`)
  getBlogs(res)
  navigate('/');
}

2. useSearchParams

1) 쿼리 스트링 정의와 필요성

쿼리 스트링은 url의 한 부분으로, 요청하는 url에 부가정보를 포함할 때 사용한다. 기존 URL 은 단순한 형태의 요청과 응답을 주고받았지만 쿼리 스트링을 사용하면 조건에 맞게 정렬된 특정 형태의 정보만 요청하고 받을 수 있다.

2) 쿼리 스트링의 형태

쿼리 스트링은 문자열의 형태를 띠며 key = value로 표현한다. url의 일부이므로 ? 이후부터 시작되고, 각 쿼리 스트링의 구분은 &로 한다.
쿼리 스트링은 URL에 부가적인 정보를 포함하는 것이므로 라우터 컴포넌트에도 특별한 설정이 필요 없다. 아래처럼 링크 역할을 하는 컴포넌트에 쿼리 스트링이 포함된 주소를 전달하면 된다.

// Link
<Link to="/chart?region=강남구" />
  
// useNavigate
navigate("/chart?region=강남구")

3) 컴포넌트에서 쿼리 스트링 가져오기

react-router-dom에서 쿼리 스트링 값을 가져올 수 있는 hook으로는 useLocation, useSearchParams 두 개가 있다. useLocation hook은 현재의 location 객체를 반환한다.

const location = useLocation();
console.log(location);
console.log(location.search);  // ?region=강남구

location 객체를 확인해 보면 여러 객체가 나오고 그중 search 프로퍼티가 퀴리 스트링 값을 담고 있는 것을 볼 수 있다. 이를 활용해 쿼리 스트링 값을 가져와 사용할 수 있다.
하지만 더 간단히 쿼리 스트링 값을 가져올 수 있는데 이것이 useSearchParams다. react-router-dom 은 이 객체를 반환해 주는 useSearchParams라는 hook을 제공하고 아래처럼 useState 와 유사한 방식으로 선언하고 사용할 수 있다.

const [serchParams, setSearchParams] = useSearchParams();

// set 함수가 필요 없을 경우 
const [serchParams] = useSearchParams();

searchParams는 useSearchParams 객체이면서 쿼리 스트링을 다루기 위한 여러 메서드를 제공한다. setSearchParams는 인자에 객체, 문자열을 넣어주면 현재 url의 쿼리 스트링을 변경하는 기능을 제공한다.

4) serchParams와 함께 사용하는 메서드

4-1. 값을 읽어오는 메서드

searchParams.get(key) : 특정한 key의 value를 가져오는 메서드, 해당 key의 value 가 두 개라면 제일 먼저 나온 value만 리턴
searchParams.getAll(key) : 특정 key에 해당하는 모든 value를 가져오는 메서드
searchParams.toString() : 쿼리 스트링을 string 형태로 리턴

4-2. 값을 변경하는 메서드

searchParams.set(key, value) : 인자로 전달한 key 값을 value로 설정, 기존에 값이 존재했다면 그 값은 삭제
searchParams.append(key, value) : 기존 값을 변경하거나 삭제하지 않고 추가
단, serchParams 을 변경하는 메서드로 값을 변경해도 실제 url의 쿼리 스트링은 변경되지 않는다. 이를 변경하려면 setSearchParams에 searchParams를 인자로 전달해야 한다.

import { useSearchParams } from 'react-router-dom';

const [searchParams, setSearchParams] = useSearchParams();

const setSortParams = () => {
	searchParams.set('sort', 'clear');
	setSearchParams(searchParams);
};
// append 메서드를 사용하면 기존 값을 유지하며 sort라는 키에 hello-world라는 value를 추가할 수 있다.

const appendSortParams = () => {
	searchParams.append("sort", "hello-world");
	setSearchParams(searchParams);
};