📚 Reference

📜 Chapter

mutable, immutable

‣

useState

useRef

React에서 불변성

• React에서 불변성(Immutability)은 데이터가 생성된 후에는 그 상태를 변경할 수 없음을 의미한다.
• 즉, 기존 데이터를 직접 수정하는 대신, 새로운 객체나 배열을 생성하여 변경된 데이터를 담는 방식을 말한다.

중요한 이유

• React에서 불변성이 중요한 주된 이유는 성능 최적화와 상태 관리의 예측 가능성 때문이다.
• 성능 최적화
  • React는 상태(state)나 속성(props)이 변경되었을 때 컴포넌트를 다시 렌더링한다.
  • 이때 React는 이전 상태와 현재 상태를 비교해서 변경 여부를 판단하는데, 이 비교 과정이 매우 효율적이다.
  • 불변성을 지키면, 참조(reference)가 바뀌었는지 여부만 확인하면 되므로(얕은 비교), 객체나 배열의 모든 속성을 하나하나 비교할 필요가 없어진다.
    • 가변성(Mutable)의 문제점
      • 기존 데이터를 직접 수정하면, 참조는 그대로이기 때문에 React가 변경을 감지하지 못할 수 있다.
      • 예를 들어, 배열에 push 메서드를 사용하면 배열 자체의 참조는 변하지 않고 내부 값만 바뀌므로, React는 '변화가 없다'고 판단하고 재렌더링을 건너뛸 수 있다.
• 예측 가능한 상태 관리
  • 불변성을 지키면 애플리케이션의 상태 변화를 추적하기 쉬워져요.
  • 데이터가 언제, 어떻게 변경되었는지 명확해지므로 예상치 못한 버그를 줄이고 디버깅이 훨씬 수월해진다.
  • 특히 여러 컴포넌트가 동일한 상태를 공유할 때, 한 컴포넌트가 원본 데이터를 직접 수정하면 다른 컴포넌트에도 영향을 미쳐 복잡한 문제를 야기할 수 있다.

불변성을 지키는 방법

• 배열: push, pop, splice와 같이 원본 배열을 직접 수정하는 메서드 대신, map, filter, slice와 같이 새로운 배열을 반환하는 메서드를 사용하거나, 스프레드 문법(...)을 활용해 새로운 배열을 만들어라.
  • 예시:
    • ❌ (나쁜 예: 가변성) const newArray = myArray; newArray.push(item);
    • ✅ (좋은 예: 불변성) const newArray = [...myArray, item];
• 객체: Object.assign()이나 스프레드 문법(...)을 사용하여 원본 객체를 복사하고, 필요한 속성만 덮어써라.
  • 예시:
    • ❌ (나쁜 예: 가변성) const newObject = myObject; newObject.name = 'john';
    • ✅ (좋은 예: 불변성) const newObject = { ...myObject, name: 'john' };
• 요약하자면, React의 불변성은 원본을 건드리지 않고, 항상 새로운 사본을 만들어 변경 사항을 적용하는 원칙이며, 이는 효율적인 렌더링과 안정적인 상태 관리를 위해 꼭 필요하다.