더북(TheBook)

항목을 제거할 때 작성한 것처럼 [...items]findIndex를 사용해 특정 항목을 업데이트할 수도 있습니다. 다음과 같이 말이죠.

const items = [
      { id: 1, text: '안녕하세요' },
      { id: 2, text: '환영합니다' },
      { id: 3, text: '반갑습니다' }
];
const index = items.findIndex(item => item.id === 2); // 1
const nextItems = [...items];
nextItems[index] = {
    ...nextItems[index],
    text: '안녕히계세요'
};
console.log(nextItems);

출력되는 결과는 이전과 동일합니다. 이 코드에서 nextItems[index] = 형태의 대입 코드는 불변성을 유지하는 코드가 아니지만, nextItems라는 배열을 새로 만들어 해당 배열을 수정한 것이므로 기존의 items 배열은 건드리지 않았습니다. 따라서 items 배열의 불변성이 유지되기 때문에 이 코드 또한 문제가 없습니다.

map을 사용해 업데이트하는 것이 더 간결하기 때문에 이 책에서는 map을 사용해 배열의 원소를 업데이트하는 것을 권장합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.