sameData에 기존의 data를 대입하고, text 값을 수정했습니다. 비록 새로운 이름을 사용해 선언하긴 했지만 sameData와 data는 똑같은 객체를 가리키고 있습니다. 따라서 sameData.text 값을 바꾸면 당연히 data.text 값 또한 바뀌게 됩니다. sameData와 data는 완전히 일치하는 객체이기 때문에 이를 비교하면 결과는 true가 나타납니다.

하지만 만약 불변성을 유지하면서 상태를 업데이트했다면 어떨까요? 다음 코드를 한번 확인해보세요.

const data = { id: 1, text: '안녕하세요' };
const nextData = { ...data, text: '안녕히계세요' };

console.log(nextData === data); // false

이번에 선언한 nextData는 새로운 객체입니다. 이 객체에는 기존의 data 값을 spread 연산자를 사용해 펼쳐주고, text 값을 새로운 값으로 덮어씌워줬습니다. 두 객체는 서로 완전히 다른 객체이기 때문에 둘을 비교하면 결과는 false가 나타납니다.