기존 문제점

URLSearchParams

• MDN 공식문서

: URL의 쿼리 부분을 수비게 파싱하고, 조작하고, 반복할 수 있는 방법 제공

• append, delete, entries, forEach, get, getAll, has, keys, set, sort, toString, values

<aside> ❓ 갑자기 궁금해지는 searchParams와 searchParam의 차이

• searchParams : URL의 쿼리 문자열을 다루기 위한 인터페이스를 나타내는데 사용
• searchParam : 보다 일반적이고 추상적인 용어로, URL의 쿼리 부분에 포함된 개별적인 파라미터나 키-값 쌍을 가리킬 때 사용할 수도 있다 </aside>

URLSearchParams 객체 사용해보기

1. searchParams 선언

   const searchParams = new URLSearchParams('<http://localhost:3000/home?a=1&b=2&c=3>');
   console.log(searchParams.toString());
   

   

2. append

   cconst searchParams = new URLSearchParams('<http://localhost:3000/home?a=1&b=2&c=3>');
   searchParams.append('c','4');
   searchParams.append('c','5')
   console.log(searchParams.toString());
   

   

3. delete

   cconst searchParams = new URLSearchParams('<http://localhost:3000/home?a=1&b=2&c=3>');
   searchParams.append('c','4');
   searchParams.append('c','5');
   searchParams.delete('c');
   console.log(searchParams.toString());
   

   

URLSearchParams의 한계

delete메서드를 사용하면, 해당 key에 대한 모든 searchParams를 제거한다.

즉, 원하는 key & value쌍을 제거하지 못한다.

해결 방안

URLSearchParams객체를 우선 다루기 쉬운 형태로 바꾸어야 한다. 기존 searchParams는 key-value형태이므로 객체 리터럴 혹은 Map이 적절하다. 둘 중에 순회를 용이하게 하기 위해서는 Map이 객체 리터럴보다 더 적절하다고 판단하였다. 또한 has, get, delete를 이용하여 보다 용이하고 명시적인 데이터 조작이 가능하다는 장점이 있다.

Map으로 변환을 하고 해당 객체를 계속 사용할 것이기에 class로 추상화하는 것이 적절하다고 판단하였다. 함수로 추상화를 할 경우, Map으로 변환한 객체를 함수를 사용하는 측에서 하거나, 혹은 함수를 사용할 때마다 Map으로 변환하여 해당 객체 변수를 가지고 있어야 한다.

이러한 Map으로 변환한 객체를 class의 프로퍼티로 가지고 있으면 적절하다고 판단하였다.

1. searchParamsMap 프로퍼티