Object – map()을 이용한 JSON 데이터 수정

자바스크립트에서 배열 안의 특정 객체만 값을 바꾸고 싶을 때는 어떻게 할까?
흔히 사용하는 패턴은 Array.prototype.map()과 조건문(===)을 조합해서 특정 조건을 만족하는 객체만 수정하는 것이다.

---

예제 코드

// 특정 고유 키 값(compareVal)을 기준으로 배열의 특정 객체만 업데이트
setSampleData(
  sampleData.map(item =>
    item.key === compareVal // 고유 키로 비교
      ? { ...item, key: e.target.value } // 값만 변경
      : item // 나머지는 그대로
  )
);

위 예제는 React의 상태 업데이트 예시로, 기존 sampleData 배열을 순회하며
특정 조건을 만족하는 객체만 찾아 해당 값을 업데이트하는 방식이다.

---

핵심 포인트

• map()은 새로운 배열을 반환하므로 원본 배열은 변경되지 않음
• 불변성 유지 → React의 상태 관리에 필수
• item.key === 비교값 조건으로 원하는 객체만 찾아 수정
• 나머지 객체들은 그대로 반환하여 배열 구조 유지

---

사용 예시 상황

• 리스트에서 특정 항목만 수정하고 싶을 때 (ex. 체크박스 상태 변경)
• Form에서 특정 인풋만 변경
• 드래그 앤 드롭 등에서 순서를 바꾸거나 일부 값만 업데이트할 때