민프
[React][TypeScript] react-router-dom v6 - useSearchParams를 이용하여 search 파라미터에 대한 대응을 해보자 본문
[React][TypeScript] react-router-dom v6 - useSearchParams를 이용하여 search 파라미터에 대한 대응을 해보자
민프야 2023. 1. 25. 15:38우리가 검색을 하거나, filter 하거나, pagnation 하고 싶을 때 이런 정보들을 URL에 넣게 되는데 이런 것들을
search Parameter 이라고 한다.
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
URLSearchParams - Web APIs | MDN
The URLSearchParams interface defines utility methods to work with the query string of a URL.
developer.mozilla.org
searchParams에 대한 메소드들은 아래 사진과 같이 공식홈페이지에 나와있다.
만약 URL이 아래와 같다고 해보자
localhost:3000/?fav=yes&geo=123&something=true
여기에서
.has("geo")를 해보면 => True or False 로 Return해주고
.get("geo")를 해보면 => 123이 return된다.
그렇다면 params들을 수정해주려면 어떻게 해야할까?
이렇게 해주면 3초 후에
localhost:3000/?fav=yes&geo=123&something=true
에서
localhost:3000/?day=today&tomorrow=123
으로 변환 될 것이다.
이 외에도 v6에는 많은 부분이 추가 되었다.
https://reactrouter.com/en/main
Home v6.7.0
I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away.
reactrouter.com
공식 홈페이지를 보면 사용중인 HOOK들을 볼 수 있는데 정말 많은 것들이 있다...
적절한 때에 잘 사용해보자
