자바스크립트에서 쿼리스트링을 객체, object로 변환하기

자바스크립트를 사용하여 URL 주소로 입력된 쿼리스트링 값을 객체로 변환하는 방법에 대하여 알아보려고 합니다.

# 자바스크립트 쿼리스트링 객체 변환하기

쿼리스트링은 주소창에 입력된 파라미터 값으로 ?keyword=webisfree와 같이 사용된 문자열을 말합니다. 이 값을 사용하면 웹페이지에 특정한 값을 URL 주소로 쉽게 전달 받을 수 있습니다.

@ 쿼리스트링의 장점?
물론 파라미터 값을 전달하는 방법은 다른 방법도 있지만 이 방법만의 가장 큰 장점은 페이지를 이동해도 여전히 파라미터 값을 유지할 수 있다는 점입니다. 쉽게 말해 뒤로 가기 버튼을 눌러도 이 값은 url에 그대로 남아있죠.


그렇다면 어떻게 하면 쿼리스트링을 객체로 변환할 수 있을까요? 우선 객체로 왜 변환할까요? 가장 큰 이유는 값을 가져오거나 변경하기 편하기 때문입니다. 쿼리스트링 자체를 변환하려면 정규표현식이나 일치하는 문자열을 찾아 바꿔야하죠. 하지만 객체로 바꿔두면 Key, Value 페어로 쉽게 값을 찾고 저장하는 것이 가능하죠.

! 자바스크립트 쿼리스트링 객체 변환 예제

그렇다면 이제 방법을 알아봅니다. 아래와 같이 두 가지 방법을 사용할 수 있습니다.

@ 첫 번째 방법
이 방법은 location API를 사용해 쿼리스트링을 읽어온 후 replace() 함수를 사용해 객체 리터럴로 변환 후 다시 JSON.parse()를 사용하여 파싱하는 방법입니다. 아래를 봐주세요.

현재 URL 주소
https://webisfree.com/?a=web&b=is&c=free

이제 위의 a, b, c를 가져와 변환합니다.

결과를 확인하면 쿼리스트링이 객체로 잘 변환된 것을 확인할 수 있습니다.


@ 두 번째 방법
다음 방법으로 가장 많이 사용되는 방법 중 하나입니다. 바로 URLSearchParams를 사용하는 방법이죠. URLSearchParams는 코드가 간결합니다. 먼저 앞에 있는 queryStrToObj() 함수에 인자로 현재의 쿼리스트링을 넘겨주고 결과로 Iterator를 전달 받을 수 있습니다. 이 값을 paramsToObj() 함수를 사용하여 객체의 key와 value로 조합합니다. 

출력 결과는 동일합니다.


여기까지 두 가지 방법의 자바스크립트 쿼리스트링 문자열을 객체로 변환하는 방법에 대하여 알아보았습니다. 참고로 두 가지 방법 중에서 후자인 URLSearchParams를 많이 사용하고 선호합니다.

! 팁과 정보

이와같이 쿼리스트링을 객체로 변환하면 단점도 있는데요... 바로 쿼리스트링에 같은 파라미터가 중복해 존재하는 경우입니다. 즉 객체는 동일한 네이밍의 키 값을 가질 수 없기 때문이죠. 이런 이유로 중복된 파라미터 키가 존재한다면 객체로 변환하는 방법이 아닌 다른 방법을 사용하는게 좋습니다.