[JS] URLSearchParams

hang_kem_0531·2022년 6월 5일
0
post-thumbnail

이번 프로젝트를 진행하면서 가장 새로웠던 코드는 URLSearchParams이다. 이 URLSearchParams를 사용하여 query의 특정 key의 value 값을 사용할 수 있었는데, 더 알아보니 이 URLSearchParams를 통해서 query string을 변경할 수도 있다는 걸 알게 되었다. 그럼 지금부터, URLSearchParams가 무엇이고 어떤 메서드들을 가지고 있는지 알아보자.

URLSearchParams?

URLSearchParams 인터페이스는 URL의 쿼리 문자열에 대해 작업할 수 있는 유틸리티 메서드를 정의한다. 즉, 해당 코드를 사용하면 URL의 쿼리 문자열을 개발자의 의도에 맞게 사용할 수 있는 것이다. 이 기능은 IE(Internet Explorer)에서는 안되지만, 모던 브라우저에서는 사용할 수 있다.

생성자

URLSearchParams()

메서드

  • URLSearchParams.append()
    특정 키/값을 새로운 검색 매개변수로 추가한다.

  • URLSearchParams.delete()
    특정 매개변수를 찾아 키와 값을 모두 지운다.

  • URLSearchParams.entries()
    객체의 모든 키/값 쌍을 순회할 수 있는 순회기를 반환한다.

  • URLSearchParams.forEach()
    객체의 모든 값을 순회하며 지정한 콜백을 호출한다.

  • URLSearchParams.get()
    주어진 검색 매개변수에 연결된 첫 번째 값을 반환한다.

  • URLSearchParams.getAll()
    주어진 검색 매개변수에 연결된 모든 값을 반환한다.

  • URLSearchParams.has()
    주어진 검색 매개변수의 존재 여부를 나타내는 Boolean을 반환한다.

  • URLSearchParams.keys()
    객체의 모든 키를 순회할 수 있는 순회기를 반환한다.

  • URLSearchParams.set()
    주어진 검색 매개변수에 연결된 값을 설정한다. 연결된 값이 다수라면 나머지는 제거한다.

  • URLSearchParams.sort()
    모든 키/값 쌍을 키로 정렬한다.

  • URLSearchParams.toString()
    URL에 쓰기 적합한 형태의 쿼리 문자열을 반환한다.

  • URLSearchParams.values()
    객체의 모든 값을 순회할 수 있는 순회기를 반환한다.

사용 예시

내가 프로젝트에서 활용했던 메서드는 URLSearchParams.get() 함수였다. 각 카테고리에 따라 표시되는 타이틀이 변경되는 기능이 필요했는데, 이를 query parameter의 키/값을 활용하여 변경할 수 있을 것 같았다.

urlParams라는 변수에 location.search 인스턴스를 반환하는 URLSearchParams 인터페이스를 할당하고, 남자, 여자, 악세서리 카테고리를 구분짓는 menu key값의 value를 받아올 수 있도록 .get 메서드를 활용했다.

그러면 이렇게 query parameter가 변경될 때 마다, get 함수에 의해 타이틀도 바뀌게 된다.

그렇다면, URLSearchParams.set() 메서드와 URLSearchParams.append() 메서드를 활용해서 복잡하게 구현했던 다중 필터링 기능을 보다 가독성 있고 효율적으로 구현할 수 있지 않을까?

이러한 로직으로 구현한다면 중복 필터링은 set으로 변경되고, 존재하지 않는 query는 추가되는 식으로 구현할 수 있을 것 같은데, 백엔드가 서버를 켜지 않아서 인지 적용이 안되는 것 같다.. 차후에 서버가 열린뒤에 확인해보아야 할 것 같다. 또한, URLSearchParams.delete 메서드를 활용하여 필터 초기화 기능 역시 구현할 수 있지 않을까 생각된다.

profile
Front-End Developer

2개의 댓글

comment-user-thumbnail
2022년 6월 5일

URLSearchParams 에 대해 잘보고 갑니다~

1개의 답글