개요
아니, 그래서 무슨 쿼리를 날려줘야 하는 거에요?
백엔드와 통신할 때, 키값을 맞추는 데에 많은 시간을 쏟는 것 같습니다.
특히 저는 괜시리 이미 나와있는 패키지를 쓰기 전에 제 생각대로 구현해보는 버릇이 있다보니
사실 'qs' 라는 패키지를 쓰면 될 것을, 이번 프로젝트에서 기어코 쿼리스트링 조합기를 만들어보겠다... 라는 감정으로 이틀동안 머리를 쥐어 뜯었습니다.
첫 번째 생각
qs는 어떻게 되어있지?
당췌 qs라는 패키지는 어떻게 파싱해오고, 쿼리 스트링으로 변환하는거지?! 싶어서 직접 깃허브에 들어가 뜯어보니..
오호라... 이 친구도 대충 반복문을 돌리고 있는 것 같고
객체 배열의 key:value 형태를 사용하는 것 같습니다.
아하! 보통 버튼을 눌러서 조건을 걸곤 하니까, 이 버튼을 통해 쿼리 스트링이 조합될 키와 값을 전달해주면 되겠구나! 라는 생각에 닿았습니다.
- 객체 배열이 하나 필요하다!
- 버튼을 클릭했을 때, key는 정해진 카테고리의 값일테고
- name에 value를 줘서 업데이트 시키면 어떨까?
약간의 1차 삽질(?)은 나름 저를 감동먹게 만들었습니다.
onClick method가 될 getEachQuery에서 쿼리 스트링이 될 객체 배열을 업데이트하는데,
버튼을 두 번 누르면 쿼리에서 사라져야하기 때문에 배열에서 해당 키값을 지우도록 하는 분기도 넣었습니다.
그래서 쿼리는 어떻게 만드니?
쿼리는 ? + ...key=value& 의 반복 아닌가?
맨 앞의 물음표는 대충 뭐... navigate에 상수로 박는다셈 치고
나머지는 쿼리 객체 배열을 dependency로 삼아 누산기를 돌려보았습니다.
key=value& 가 반복되는 패턴이기 때문에 가능한 부분이었고
마지막 &는 slice를 통해 잘라줍니다.
1차 버전...
그렇게해서 만든 1차(?!) 버전이었습니다.
솔직히 말해서 깔끔하다고는 절대 말 할 수는 없을 것 같은데..
일단은 잘..... 돌아갑니다?
아니 이거 근데... 너무 더러워..
조금 더 간소화시킬 수는 없는 건가..? 좀 쎄한데... 더러운데... 라는 기분과 함께 새로운 방법을 찾아 나섰습니다.
Hello, useSearchParams!
아니 이게 뭐야.. 이게 이렇게 줄어든다고?
react-router-dom v6부터 지원하는 useSearchParams는 이러한 제 고민을 너무너무나도 말끔하게 치워버렸습니다.
const location = useLocation();
const nowLocation = new UseSearchParams(location.search)예를 들면, 현재 쿼리를 알기 위해서는 기존에는 이렇게 했었던 것 같은데
const [searchParams] = useSearchParams();
const nowLocation = searchParams.toString();이 친구는, 그저 바로 뱉습니다!
한 번 시험삼아 searchParams를 로그에 찍어보니
뭐야.. URLSearchParams를 사용하고 있습니다..?
아하! 제가 저렇게 풀었던 동작이 이미 구현된, 아주 고마운 훅이었던 거죠.
searchParams.get(key) : key에 대한 값 확인 searchParams.set(key,value) : key=value 객체 생성 searchParams.delete(key) : key 객체 삭제
자세히 뜯어본 것은 아니지만, 이러한 메서드가 주로 사용되는데
딱 봐도, 뭔가 제가 만든 것과 별반 다를 것은 없어보였습니다.
그럼에도 불구하고..
이 훅을 개량한 최종 버전은 위와 같습니다.
하... 너무나도 쉬울 수가!
무려 35줄이었던 코드는 단지, 20줄로 줄어들어버렸습니다.
정말... 써본 사람이 안다고, 어떻게보면 허탈함도 느꼈습니다.
마무리
글은 정말 짧지만, 이 고민을 이틀동안 했습니다.
패턴은 알겠는데.. 어떻게 조합해야되지..? 라고 생각하면서
바보같은 짓을 많이 하다가, 패키지를 직접 뜯어 힌트를 얻고
어떻게든 구현을 했고 또 몰랐던 훅을 찾아 간단히 리팩토링도 했습니다.
앞으로 또 필터와 관련된 무언가가 있을 때...
이거 한 번 잡숴봐!! 하면서 들이댈만한 무언가가 생긴 것 같습니다!
