배열 State 업데이트하기

1️⃣ 배열도 state로 사용할 땐 불변하게 다뤄야 함

JavaScript 배열은 변경 가능하지만, React state에서는 직접 변경하면 안 됨.

2️⃣ 업데이트 시 새 배열 생성 필수

배열을 수정하려면 기존 배열을 복사하거나 새로 만들어 state를 갱신해야 함.

3️⃣ 불변성 유지로 React가 변경 감지 가능

새 배열로 교체해야만 React가 변경을 인식하고 렌더링을 제대로 수행함.

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

1️⃣ 배열도 객체처럼 읽기 전용으로 다뤄야 함

React state의 배열은 직접 수정하지 말고, 불변성을 유지해야 함.

2️⃣ 직접 변경 금지: 재할당·push/pop 사용 X

예: arr[0] = 'bird', push(), pop() 등으로 배열을 수정하면 안 됨.

3️⃣ 새 배열 생성으로만 업데이트

배열을 변경할 때는 기존 배열을 바탕으로 새 배열을 만들어 state를 갱신해야 함.

1️⃣ 배열 업데이트 시 새 배열 전달

항상 새 배열을 만들어 state 설정 함수에 전달해야 함.

2️⃣ filter/map 등 불변 함수 사용 권장

filter(), map() 같은 함수는 원본 배열을 수정하지 않고 새 배열을 생성함.