배열을 수정해보자.
위 사진처럼 기존에 유저가 있고 put요청으로 id값 2번을 홍길동으로 수정을 하고 싶다.
이렇게 1번 인덱스인 id가 2번 유저의 이름을 dto에서 받은 이름으로 넣고 콘솔을 찍어보았다.
데이터가 바뀐것을 확인 할 수 있다.
하지만 이렇게 하면 데이터가 변경되는 것이므로 최적화를 못시키기때문에 좋은 방법이 아니다.
위의 예제를 하기 전에 아래에서 잠깐 연습을 해보자,
최적화를 시키면서 변경하기 위해선 먼저 ...a6로 흩뿌리고, 그 상태에서 name:"임꺽정" 이라고 바꿔주면..?
{id:1,name:"홍길동",name:"임꺽정"} 이렇게 되는거랑 똑같은데 이렇게 되면 뒤에 있는게 앞에걸 덮어 씌워버린다. 뒤에 있는게 앞에걸 덮어 씌우는거니까 순서를 잘 지켜야한다.
name 값이 홍길동에서 임꺽정으로 바뀌었다.
자, 다시 원래의 예제로 돌아가서 id가 2번인 데이터의 name을 바꾸고 싶다.
우선 map으로 배열을 가지고 온다 이건 const newUser = {...users}랑 같은 의미이다.
이렇게 똑같이 배열로 나온다. 이 상태에서
이제 배열의 크기만큼 3번 순회를 할건데 삼항 연산자를 통해 user.id와 updateUserDto.id를 비교하고 맞으면 해당 user데이터에 있는 값을 updateUserDto로 바꾼다. 저 updateUserDto도 중괄호 안에 흩뿌려야하기때문에 앞에 ...을 꼭 붙여야한다.
결과를 확인하니 잘 바뀌었다.
이상 배열 수정하기는 여기까지!
이 글은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 게시글 입니다.
