[리액트공식문서][상호작용성 더하기] 배열 State 업데이트하기

◼ state를 설정하면 렌더링이 동작합니다.  

JavaScript에서 배열은 다른 종류의 객체입니다. 객체와 마찬가지로 React state에서 배열은 읽기 전용으로 처리해야 합니다. 즉 arr[0] = 'bird'처럼 배열 내부의 항목을 재할당해서는 안 되며 push()나 pop()같은 함수로 배열을 변경해서는 안됩니다.

 

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

또는 두 열의 함수를 모두 사용할 수 있도록 하는 Immer를 사용할 수 있습니다.

 

[+주의]

안타깝지만, slice와 splice 함수는 이름이 비슷하지만 몹시 다릅니다. slice를 사용하면 배열 또는 그 일부를 복사할 수 있습니다. splice는 배열을 변경합니다. (항목을 추가하거나 제거합니다.) React에서는, state의 객체나 배열을 변경하지 않는 게 좋기 때문에 slice (p가 없습니다!)를 훨씬 더 자주 사용하게 될 것입니다. 객체 업데이트에서 변경이 무엇이고 왜 state에 권장되지 않는지에 대해 이유를 설명합니다.

 

 

 

 

---

 

 

◼ 요약 

 

전체적인 내용은 객체 업데이트와 비슷하다.

내용을 바꾸는 것 보단 새로 배열을 만들어서 업데이트(덮어쓰기)를 하는 방식으로 갚을 수정,추가 등 해야한다

 

• 배열을 state로 만들 수 있지만 변경하면 안됩니다.
• 배열을 변경하는 대신 배열의 새로운 버전을 만들고, state를 업데이트 해야합니다.
• [...arr, newItem] 배열 전개 구문을 사용하여 새 항목을 포함한 배열을 생성할 수 있습니다.
• filter()와 map()을 사용하여 필터링된 항목들이나 변환된 항목들을 가진 배열을 만들 수 있습니다.
• Immer를 사용하여 코드 간결성을 유지할 수 있습니다.