React 배열 수정

1️⃣ 예시

① users라는 데이터가 있고

const users = [
  { id: 1, name: "구태모", phone: "2222" },
  { id: 2, name: "이대엽", phone: "3333" },
  { id: 3, name: "오승훈", phone: "4444" }
];

 

② PUT 요청이 왔는데

const updateUserDto = {
  id: 2,
  name: "홍길동"
};

 

③ id가 2인 것의 name을 변경해야 한다면 아래처럼 변경할 수 있지만,

users[1].name = updateUserDto.name;
console.log(users);

기존 데이터를 담고 있기 때문에 이 방법으로 변경하면 안됨!

 

 

④ 배열에서 id 2번만 딱 찾아서 name 변경하기

1. map으로 복제 후 스프레드 연산자로 덮어쓰기
2. user.id와 updateUserDsto.id가 같은지 비교하고
3. 같으면 덮어씌우고
4. 다르면 그냥 user가 출력됨

const newUsers = users.map(user => user.id === updateUserDto.id ? { ...user, ...updateUserDto } : user);
console.log("newUsers", newUsers);