🚨 React 재렌더링 방법: 레퍼런스가 중요!

Source: Dev.to

변형 메서드 (참조 변경 금지)

이 메서드들은 메모리 상의 동일한 배열/객체를 직접 수정하므로, React 상태에 바로 사용하면 리렌더가 발생하지 않을 수 있습니다:

• push
• pop
• shift
• unshift
• sort
• reverse
• splice
• fill
• copyWithin

// ❌ 잘못된 예: 기존 상태를 변형
setItems(prev => {
  prev.push(1);   // `prev`를 변형
  return prev;   // 같은 참조 → 리렌더 없음
});

안전한 메서드 (새로운 참조 생성)

이 메서드들은 새로운 배열을 반환하므로 React가 변화를 감지할 수 있습니다:

• map
• filter
• concat
• slice
• flat
• flatMap
• toSorted
• toReversed
• toSpliced

// ✅ 올바른 예: 새로운 배열 반환
setItems(prev => [...prev, 1]);   // 새로운 배열로 스프레드

기억해야 할 핵심 규칙

React는 값이 아니라 참조를 비교합니다. 새로운 참조로 상태를 업데이트하면 리렌더가 보장됩니다.

한 줄 요약

“변형 메서드는 같은 참조를 유지하므로 React는 리렌더하지 않습니다. 상태를 업데이트할 때는 항상 새로운 참조를 반환하세요.”