개요

아니, 그래서 무슨 쿼리를 날려줘야 하는 거에요?

백엔드와 통신할 때, 키값을 맞추는 데에 많은 시간을 쏟는 것 같습니다.

특히 저는 괜시리 이미 나와있는 패키지를 쓰기 전에 제 생각대로 구현해보는 버릇이 있다보니

사실 'qs' 라는 패키지를 쓰면 될 것을, 이번 프로젝트에서 기어코 쿼리스트링 조합기를 만들어보겠다... 라는 감정으로 이틀동안 머리를 쥐어 뜯었습니다.

첫 번째 생각

qs는 어떻게 되어있지?

당췌 qs라는 패키지는 어떻게 파싱해오고, 쿼리 스트링으로 변환하는거지?! 싶어서 직접 깃허브에 들어가 뜯어보니..

오호라... 이 친구도 대충 반복문을 돌리고 있는 것 같고
객체 배열의 key:value 형태를 사용하는 것 같습니다.

아하! 보통 버튼을 눌러서 조건을 걸곤 하니까, 이 버튼을 통해 쿼리 스트링이 조합될 키와 값을 전달해주면 되겠구나! 라는 생각에 닿았습니다.

1. 객체 배열이 하나 필요하다!
2. 버튼을 클릭했을 때, key는 정해진 카테고리의 값일테고
3. 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줄로 줄어들어버렸습니다.

정말... 써본 사람이 안다고, 어떻게보면 허탈함도 느꼈습니다.

마무리

글은 정말 짧지만, 이 고민을 이틀동안 했습니다.

패턴은 알겠는데.. 어떻게 조합해야되지..? 라고 생각하면서

바보같은 짓을 많이 하다가, 패키지를 직접 뜯어 힌트를 얻고

어떻게든 구현을 했고 또 몰랐던 훅을 찾아 간단히 리팩토링도 했습니다.

앞으로 또 필터와 관련된 무언가가 있을 때...

이거 한 번 잡숴봐!! 하면서 들이댈만한 무언가가 생긴 것 같습니다!