[React] react-router-dom | useParams, useSearchParams

두고두고 써먹을 나만의 메모장

 

react-router-dom의 최신 기능 | useParams와 useSearchParams | 기록해 보자구 !!

---

먼저 URL주소에는 우리가 흔히 알고있는

 

파라미터 | 도메인주소/parameter1/parameter2/... 

쿼리 | 도메인주소/parameter1?key1=value1&key2=value2&...

 

위의 두 가지 형태가 있다.

 

1. 파라미터로 연결되는 주소는 메뉴에 depth가 있는 형태 일 때 주로 사용된다.

  예 | 쇼핑몰에서 상의 라는 상위 카테고리가 있고, 그 아래에 아우터라는 하위 카테고리가 있을경우

  URL : 도메인주소/상의, 도메인주소/상의/아우터

  와 같이 쓰일 수 있다.

 

2. 쿼리는 어떤 경우에 주로 사용하는가? 특정 값으로 조회되는 형태 일 때 주로 사용된다.

  예 | 쇼핑몰에서 아우터라는 카테고리 내에서 페이지 이동이 생기는 경우.

  URL : 도메인주소/상의/아우터?page=2

  와 같이 쓰일 수 있다.

 

이제 이 각각의 주소 형태에 대해서 React에서는 어떠한 방법으로

파라미터와 쿼리를 가져올 수 있는지 알아보자 !! 🤔🤔

---

1. useParams

 

아래와 같이 Router 설정이 되어있다고 가정해보자.

<Routes>
  <Route path="/view/:parameter1" element="<Component />" />
  ...
</Routes>

 

 

위의 주소에서 우리는 parameter1이라는 값을 가져오기 위해,

과거에는 props.match가 담고있는 params라는 변수를 이용하여 url 파라미터 값을 가져왔다.

const Component = ({ match }) => {

  const { parameter1 } = match.params;
  
  ...

 

하지만, 지금은 위의 복잡한(?) 과정이 모두 생략되었다.

const Component = () => {
  const { parameter1 } = useParams();
  
  ...

 

위의 코드 처럼 useParams을 사용함으로써 너무도 쉽게 paramter1 값을 가져오고, 사용할 수 있다.

 

한 눈에 보기에도 이전 코드에 비해 훨씬 깔끔하고 편리해졌다.

 

사용예시 | 도메인주소/view/outer 라고 접속하면,

Component에서 parameter1의 값은 'outer'가 되게된다.

---

2. useSearchParams

 

다음은 쿼리를 날리는 방법이다.

아래와 같이 Router를 설정해 보자.

<Routes>
  <Route path="/view" element="<Component/>" />
  ...
</Routes>

이제, 도메인주소/view?page=1 이라는 주소로 접속하였다고 가정을 해보자 !!

 

여기서 우리는 page라는 값을 이용하기 위해 이전에는 아래와 같이 작성을 하여야했다.

const Component = () => {
  const { search } = window.location.search
  ...

위와 같이 작성을 하게 되면 ?를 포함한 ?이하의 query문을 search에 담을 수 있다.

해당 코드의 경우에 search는 '?page=1' 이라는 결과가 나온다.

하지만, 이것이 쿼리 값을 완전하게 가져온 것은 아니다.

 

해당 쿼리의 사용할 수 있는 형태로 가져오기 위해 우리는 query-string이라는 별도의 패키지를 받아야했고,

search를 object형태로 parsing하는 번거로움을 거쳤어야 했다.

const Component = (props) => {
  const { search } = window.location.search;
  const qs = queryString.parse(search)
  ...

그리고, 위와 같이 작성을 하였을 때, 온전히 { page: '1' } 이라는 object를 얻을 수 있었다.

 

다 잊어라..!

 

복잡했던 쿼리 값 가져오기 아래의 코드로 해결이 가능하다.

const Component = () => {
  const [searchParams, setSearchParams] = useSearchParams()
  
  // 값 그대로 가져오는 방법
  const page = searchParams.get('page') || 1
  
  // object 형태로 가져오는 방법
  const params = {
    page: searchParams.get('page') || 1
  }
  ...

React에서 자체적으로 query의 key에 해당하는 값을 get하여 가져올 수 있게 되었다.

searchParams.get('key')를 이용하여 원하는 형태로 값을 이용할 수 있다.

 

경우에 따라 다르겠지만, 개인적인 견해로는 Object 형태로 담아 key, value 형태로 사용하는 것을 조금 더 선호한다.

 

* 'searchParams.get('page') || 1'로 작성한 이유는 page값이 없더라도 1이라는 값을 default로 사용하겠다는 의미이다.

 

* 단, 얻고자 하는값이 숫자인 경우에는 Number로 감싸주어야 숫자로써 사용이 가능하다.

  모든 변환 return 값은 string이 기본 위의 경우에도 page = '1'로 문자형태로 가져온다.

  숫자로 쓰길 원하면 Number(searchParams.get('page'))와 같이 사용하면 된다.

 

 

eventHandler를 통해 query값만 변경하길 원하는 경우가 있다.

그런 경우에는 { key : value }의 Object 형태로 변경하여주면 된다.

 

사용 예제는 아래를 참고하자.

const Component = () => {
  const [searchParams, setSearchParams] = useSearchParams()
  const params = {
    page: searchParams.get('page') || 1,
  }
  
  const searchParamsHandler = () => {
    const value = '2'
    params['page'] = value;
    
    setSearchParams(params) // setSearchParams({page: '2'})
  }
  
  ...

위와 같이 useSearchParams를 useState처럼 사용함으로써 Link를 사용하지 않더라도 query값을 변경하여

화면 상의 변화를 줄 수 있다.

---

3. 참고? 주의? 사항

 

만약, query에 딸려오는 값이 여러개이고, 모두 사용해야 하는 경우 !!

 

예 | 도메인주소/view?type=list&page=1

setSearchParams({page: '2'})

  // Expect result : 도메인주소/view?page=2

"나는 페이지 값만 바뀌니 페이지 값만 바꿔주면 되겠지?" 하면서 위와 같이 작성한다면,

type에 대한 값은 날려버리게 될 것이다.

 

그러므로 key, value 값이 여러개인 경우는 처음부터 Object형태로 담아 해당되는 값만 바꾸면서 사용하는 것이

조금은 더 효율적일 것이다.

 

* 위에서 Object 형태로 사용하는 것을 선호했던 이유

 

예시 코드

const params = {
  type: searchParams.get('type'),
  page: searchParams.get('page'),
}

const searchParamsHandler = () => {
  params['page'] = '2'
  
  setSearchParams(params)  
}

---

4. 마무리

 

React는 싱글페이지 !! 라는 인식이 자리잡고있었던 것 같다.

 

그러다 보니 Route를 이용해 화면을 다루는 것이 쉽지 않았는데,

 

URL Parameter와 Query 역시 그 중 하나였다.

 

오늘의 기록을 두고두고 학습하며, 더욱더 성장하는 React 개발자가 될 수 있기를

 

내 자신에게 바라본다.