리액트에서 객체와 배열 타입의 상태를 다룰 때는 불변성(immutability)을 지켜야 합니다. 불변성을 지킨다는 것은 객체 또는 배열을 직접 수정하지 않는다는 것을 의미합니다.

예를 들어, 다음과 같은 객체가 있다고 가정해봅시다.

const info = {
    id: 1,
    name: 'John Doe'
};

만약 info의 name 값을 'Jane Doe'로 바꾼다면 보통 다음과 같은 코드를 작성할 것입니다.

info.name = 'Jane Doe';

리액트에서 상태를 다룰 때는 객체가 지닌 값을 바꾸고 싶다고 해서 앞에서와 같이 값을 직접 수정하면 안 됩니다. 그 대신 기존 객체는 그대로 두고, 새로운 객체를 만들어 원하는 값을 덮어씌워야 합니다.

const nextInfo = {
    ...info,
    name: 'Jane Doe'
};

const object = { a: 1, b: 2, c: 3 };
const anotherObject = { ...object, d: 4 };
console.log(anotherObject); // { a: 1, b: 2, c: 3, d: 4 }
const updatedObject = { ...object, c: 10 };
console.log(updatedObject); // { a: 1, b: 2, c: 10 }