4.1.2 배열의 불변성을 지키는 방법

리액트에서 배열 타입의 상태를 다룰 때에도 불변성을 지켜야 합니다. 우선 불변성을 지키지 않으면서 배열을 수정하는 코드들을 예로 한번 볼까요?

const numbers = [0, 1, 2, 3];
// 추가
numbers.push(4);
// 수정
numbers[0] = 10;
// 삭제
number.splice(0, 1);

이 코드는 모두 배열을 직접 수정합니다. 리액트에서 상태를 관리할 때는 이와 같이 코드를 작성하면 안 됩니다. 그 대신 배열의 내장 함수들을 활용해 새로운 배열을 생성하는 방식으로 배열의 상태를 업데이트해야 합니다.

4.1.2.1 새로운 항목 추가하기

불변성을 유지하면서 배열에 새로운 항목을 추가하는 방법은 두 가지가 있습니다. 첫 번째 방법은 spread 연산자를 사용하는 것입니다.

const numbers = [0, 1, 2, 3];
const nextNumbers = [...numbers, 4];

const nextNumbers = [...numbers, 4, ...numbers];