useState (배열)

자바스크립트에서는 배열 변경이 가능하지만

state로 저장할 때는 변경할 수 없도록 해야한다.

객체와 마찬가지로,

state에 저장된 배열을 업데이트하고 싶을 때는

새 배열을 생성하거나

기존 배열의 복사본을 생성한 뒤,

이 배열을 state로 두어 업데이트 해야함

 

변경하지 않고 배열 업데이트하기

arr[1] = 'maltese' 처럼 재할당하면 안 됨

push( ), pop( ) 같은 함수 사용하면 안 됨

filter( ), map( ) 같은 함수로 새 배열 만들고

새 배열들을 state에 설정

 

	비선호 (배열 변경)	선호 (새 배열 반환)
추가	push, unshift	concat, [...arr] 전개 연산자
제거	pop, shift, splice	filter, slice
교체	splice, arr[i] = ... 할당	map
정렬	reverse, sort	배열을 복사한 이후 처리

Immer를 사용하면

artwork.seen = nextSeen과 같이 변경해도 괜찮다.

 

그니까

1. state로 만든 배열은 바꾸면 안돼

2. 새 배열을 만들고 state 업데이트 해서 변경해

3. [...arr, newItem] 배열 전개 구문으로

새 항목을 포함한 배열을 만들 수 있어

4. filter( )랑 map( )를 사용할 수 있어

5. Immer를 사용하여 코드 간결성을 유지할 수 있어