15화: Updating Arrays in State

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

참새. Unsplash 에 Benjamin LECOMTE 님이 올림

공식 문서

https://react.dev/learn/updating-arrays-in-state

Updating Arrays in State – React

변형 없이 배열 업데이트하기

• 자바스크립트에서는 배열도 객체
• 따라서 배열 상태 역시 읽기 전용으로 다루어야 함
• 배열 상태를 업데이트하려면 아예 새로운 배열을 만들어서 줘야 함
• 그게 싫으면 Immer 같은 외부 라이브러리 쓰기

배열에 새로운 값 더하기

• 하지마: push, unshift, splice
• 해: [...array] 전개 구문,concat`

배열에서 값 지우기

• 하지마: pop, shift, splice
• 해: filter, slice

배열 값 교체하기

• 하지마: splice, array[1] = x; 할당
• 해: map

배열 값 정렬하기

• 하지마: reverse, sort
• 일단 복사 먼저 하고 해: [...array].sort()

기타 다른 변화가 필요할 때

• 일단 복사하고 생각하기
• 단, 배열이 객체나 다른 배열을 담고 있고 그 속의 값까지 바꿔야 하면 걔네도 복사해서 새로 만들 것
• 중첩 객체 처리할때랑 똑같음

요약

• 배열 프로토타입에 있는 메서드 중 in-place로 처리하는 애들은 못 씀
• 새로운 배열을 반환하는 애들은 쓸 수 있음