오늘은 쿼리스트링을 오브젝트로 오브젝트를 쿼리스트링으로 왔다갔다 하는 것을 연습해보겠다 ~~

내가 맡은 페이지가 필터, 검색, 페이지네이션 이 정도인데 쿼리 스트링으로 데이터 요청을 많이 하기 때문에 반드시 익혀야할 필수 과제이다 !!

먼저 쿼리스트링을 오브젝트로 바꿔보자!

const query = "?limit=10&offset=10&price=10000&size=big&place=seoul";

function queryToObject(query) {
  const [_, params] = query.split("?")
  // console.log(params);
  console.log(query);
  return params
    .split("&")
    .reduce((acc, cur) => {
    const [key, value] = cur.split("=")
    return {...acc, [key]: value}
  }, {})
}

queryToObject(query);

먼저

const [_, params] = query.split("?")

이 부분을 살펴보면
split으로 나누고 구조분해를 한 것이다.
? 문자를 기준으로 배열로 나눈 뒤 params에 ? 문자 뒤의 값을 저장했다.

params.split("&").reduce((acc, cur) => {
	const [key, value] = cur.split("=")
    return {...acc, [key]: value}
}, {})

이 부분은 reduce를 사용해서 = 을 기준으로 또 나누고 각각을 key, value 로 저장했다.
그리고 리턴으로 객체형태로 반환

다음은 쿼리스트링을 오브젝트로 !

const obj = queryToObject(query);

function objectToQuery(obj) {
  return "?" + Object.entries(obj).map((item) => {
    return (
    item.join("="))
  }).join("&")
}


objectToQuery(obj);

먼저

Object.entries(obj)

이 부분을 살펴보면 Object.entries 라는 것은 객체에 내장된 메소드인데 키와 벨류 한쌍씩 배열로 바꿔준다.

그 다음에 map을 돌리고 안에서 join을 사용하는데 join은 배열의 모든요소를 합쳐서 문자열로 만들어주는 메서드이다.

reduce를 쓰는 쿼리스트링을 오브젝트로 만드는 것 보단 쉬운것 같다 ~~

쿼리스트링이 내가 맡은 페이지 여러군데에 전부 쓰이는데 이참에 마스터를 하고 넘어가야 겠다 !!