학습 공간 개념 · 판단 · 실험

Fanta Lab

질문 86 · 실전 면접 답변

객체와 배열 state의 불변성은 어떻게 유지하나요?

이렇게 답해 보세요 (핵심 답변)

객체나 배열 state를 업데이트할 때는 기존 값을 직접 수정하지 않고, 변경이 필요한 경로의 객체와 배열만 새로 생성해 교체합니다. 배열은 map, filter, slice나 전개 연산자([...items])를 사용해 새 배열을 만들고, 중첩된 객체는 바뀐 깊이까지의 상위 객체들을 함께 복사해 새 참조를 만듭니다. 만약 중첩 구조가 깊어 수동 복사가 복잡하다면 useReducer로 상태 전이를 모으거나 Immer처럼 불변 복사본을 만들어 주는 도구를 활용할 수 있습니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

  1. 변경되지 않은 하위 객체 참조는 그대로 재사용하는 구조적 공유(structural sharing)를 통해 메모리와 복사 비용을 아낄 수 있습니다.
  2. 전개 연산자({...obj})는 최상위 한 단계만 복사하는 얕은 복사이므로 중첩된 내부 객체를 다룰 때 특히 주의해야 합니다.

면접에서 자주 하는 실수

배열을 [...items]로 얕게 복사한 뒤 그 안의 요소 객체 프로퍼티(copy[0].done = true)를 직접 수정하면 원본 배열의 요소까지 함께 오염됩니다.

원리와 예제까지 읽기

공식 참고 자료

질문 목록 출처 ↗ · 원본 86번을 바탕으로 질문과 답변을 새로 정리했습니다.

← React