[ JS ] JSON형식에서 특정 값만 변경하기

스케줄러의 이벤트 정보를 가지고 있는 JSON을 받아오는 코드다.

  const fetch = axios.get("http://localhost:5000/scheduler").then((res) => {
    const processedData = res.data.map((item) => ({
      ...item,
      start: new Date(item.start),
      end: new Date(item.end),
    }));
    return processedData;
  });

데이터베이스에 Date형식(오브젝트)의 데이터가 저장될 때에는 자동으로 문자열로 변환되어 저장된다.

하지만 나는 해당 데이터를 받아와서 Date형식으로 사용해야만한다.

따라서 fetch하여 가져온 데이터를 딱 그 부분만 다시 Date형으로 변경해야했다.

이 뿐만이라 오브젝트나 배열을 다룰 때, 다른 부분은 전부 그대로 유지하고 일부분의 값만 할 때 사용할 수 있는 방법이다.

map메서드 내에서도 쉽게 사용할 수 있으니 굉장히 편리하다.

[ES6]에서 추가된 Spread Operator (스프레드 연산자) 문법을 사용하는 것이다.

각각의 item은 오브젝트이다.

이 오브젝트의 일부 값을 변경하기 위해서는, 사실 오브젝트를 새로 만들어야한다.

{}중대괄호를 열고, {...item}을 입렵하면, 기존에 item 오브젝트 안에 있던 모든 요소(Property)를 그래도 옮겨온다.

그다음

{...item, 바꾸고자하는 값의 키 : 바꾸고자하는 값 }

형식으로 입력해주면, 딱 그부분만 바뀌고 나머지는 똑같은 새로운 배열을 할당해준다.