TIL 022_URLSerachParams.toString()

🎯URL에서 사용할 수 있는 query string 만들기

URLSearchParams interface defines utility methods to work with the query string of a URL.

toString()은 URLSearchParams interface 메서드 중 하나로, URL에서 사용할 수 있는 query string을 리턴한다.

유연한 환불 정책에 동의 여부, 슈퍼호스트 여부 및 숙소유형, 주류 종류를 선택하면 그 값들을 query string으로 변환하여 fetch로 Back과 통신하고 업데이트된 숙소 정보를 실시간으로 받아온다.

손쉽게 query string으로 바꿔주는 메서드

사용자가 필터링을 한 정보는 모두 하나의 state에 저장하여 관리하고, 이 정보를 URLSearchParams.toString()을 이용하면 쉽게 query String 으로 바꿔줄 수 있다.

이 메서드의 가장 큰 장점은 사용자가 이미 선택했던 조건을 변경하더라도 손쉽게 query를 바꿀 수 있으며, filtering의 depth가 깊어지더라도 서로의 query에 영향을 주지 않는다는 것에 있는 것 같다.

하지만 여기서 문제를 하나 발견하였다.

state에 저장되는 값이 string or number type의 경우에는 원하는 대로 query string으로 전환되었지만, array형태의 경우는 다르다는 것을 확인하였다.

room_type과 amenity와 같이 다중 선택이 가능한 경우, array 형태로 저장이 되는데, back 에서 이 정보를 처리하려면

room_type=hotel&room_type=aparment

와 같은 형태로 전달이 되어야 하는데,

room_type=hotel%2Capartment

와 같이 array 전체가 하나의 string으로 전달이 되어 오류가 난다.

해결법은?

1) 이를 처리해주기 위해 array 형태의 값은 각각의 key-value 조합으로 만들어 주는 함수를 구현해야 했다.

예를 들어 설명하자면,

1 )[key, value]로 이루어진 array로 만들고

2)URLSerachParams.toString() 으로 원하는 query 생성!

2) 그 후에, String/Number type의 query들과 Array를 변환해준 query를 연결해주면 된다.

여기서 사용된 reduce()는 합, 평균값을 구할 때만 쓰일 수 있는 것이 아니라 이렇게 두 array를 연결할 때도 사용할 수 있다는 것이 포인트!

배운점

1차 프로젝트 때 다른 조에서 사용자의 선택에 의해 filter의 depth가 깊어지거나, 사용자가 이미 선택했던 조건을 변경하는 경우 query string을 만들기 어려워 구현을 못했었다고 들었다.

구글링을 통해 query string으로 만들어주는 메서드를 발견하였고, 쉬울 줄만 알았던 query string 만들기가 응용하여 또다른 query string을 만어어야 해서 고민의 시간이 길었다.

여러 메서드들을 잘 활용해야 코드의 줄이 간편해짐을 다시 한번 깨달은 기능이었다.