핵심 답변
React는 상태 변화 여부를 업은 비교(Shallow Comparison)로 판단합니다. 객체나 배열을 직접 수정하면 같은 참조를 유지하기 때문에 React가 변화를 감지하지 못해 리렌더링이 발생하지 않습니다.
예시 코드
typescript
// 잘못된 방법: 직접 수정으로 변화 감지 안 됨
const handleAdd = () => {
items.push('새 아이템'); // 같은 참조!
setItems(items); // 리렌더링 안 됨
};
// 올바른 방법: 새 배열 생성
const handleAdd = () => {
setItems([...items, '새 아이템']); // 새 참조 생성
};
// 객체 업데이트
const handleUpdate = () => {
setUser({ ...user, name: '새 이름' }); // 스프레드로 새 객체 생성
};핵심 용어
📌 업은 비교(Shallow Comparison)객체의 내부 값이 아닌 참조(메모리 주소)만 비교하는 방식입니다. 같은 주소면 같은 값으로 판단합니다.
📌 불변성(Immutability)생성된 값을 직접 변경하지 않고, 변경이 필요할 때 새로운 값을 생성하는 원칙입니다. React에서 상태 업데이트는 항상 새 객체·배열을 만들어야 합니다.