자바스크립트 불변성

객체나 배열 등의 데이터가 생성된 이후에는 그 값을 변경할 수 없는 속성. 한 번 생성된 데이터는 변경할 수 없고 새로운 값을 반환하는 방식으로 작업을 수행하는 것

중요성

1. 예측 가능한 상태 관리

  • 불변성을 유지하면 상태 변경이 예측 가능해진다.
  • 데이터가 변경될 때마다 새로운 데이터를 생성하고, 이전 데이터는 그대로 유지하기 때문에 상태 변화를 추적하고 디버깅하기 쉬워진다.

2. 병합과 비교 용이

  • 불변성을 유지하면 데이터의 변경이 간단하고 안전해진다.
  • 객체나 배열을 병합하거나 비교하는 경우, 불변성을 유지하면 더 쉽고 정확하게 처리할 수 있다.

3. 성능 최적화

  • 불변성을 유지하면 변경된 데이터를 새로운 객체로 생성하므로 기존 데이터를 공유할 수 있다.
  • 이로 인해 불필요한 메모리 사용을 줄이고 성능을 최적화할 수 있다.

필요한 상황

1. React에서 상태 관리

  • React에서는 상태의 불변성을 유지하는 것이 중요하다.
  • 상태가 변경되면 React가 상태를 비교하여 업데이트 여부를 결정하는데, 불변성을 유지하면 업데이트 성능이 향상된다.

2. Redux와 같은 상태 관리 라이브러리

  • Redux와 같은 상태 관리 라이브러리는 불변성을 기반으로 동작한다.
  • 상태가 변경되면 새로운 상태를 반환하고 기존 상태는 변경되지 않기 때문에 상태 변화를 추적하기 쉬워진다.

3. 함수형 프로그래밍

  • 함수형 프로그래밍에서는 불변성을 유지하여 부작용을 방지하고 예측 가능한 동작을 보장한다.
  • 변경 가능한 상태를 피하고 순수한 함수를 사용하여 프로그램을 구성하는 것이 중요하다.

불변성을 유지하지 않는다면

1. 성능 측면

  • React와 같은 선언적 UI 라이브러리는 가상 DOM(Virtual DOM)을 사용하여 상태 변경을 최적화한. 이를 위해 React는 이전 상태와 새로운 상태를 비교하여 변경된 부분만을 실제 DOM에 반영한다. 이 과정에서 불필요한 렌더링을 최소화하여 성능을 향상시킨다.
  • 불변성을 유지하지 않으면 React가 상태 변화를 추적하기 어려워진다. 상태가 직접 변경되면 이전 상태와 새로운 상태를 비교할 때 변경된 부분을 정확하게 감지하지 못할 수 있다. 따라서 React는 렌더링 최적화를 적용하는 데 어려움을 겪게 된다.

2. 주관적인 측면:

  • 불변성을 유지하는 것은 상태 관리를 예측 가능하게 만든다. 상태가 직접 변경되면 언제 어떻게 상태가 바뀔지를 파악하기 어렵다. 불변성을 유지하면 상태가 항상 새로운 객체나 배열로 업데이트되므로, 상태의 변화를 추적하기 쉬워진다. 이렇게 함으로써 개발자가 상태 변경을 예측하고 디버깅하는 데 도움이 된다.

메모리 문제는 없을까?

1. 메모리 최적화

  • 불변성을 유지하면서 새로운 객체나 배열을 생성할 때, 최적화된 방법으로 구현하여 메모리 사용을 최소화한다.
  • 대부분의 자바스크립트 엔진은 이러한 상황을 최적화하고 적절한 메모리 관리를 수행한다.
  • 또한, 메모리 사용을 효율적으로 관리하기 위해 각각의 업데이트마다 새로운 객체 전체를 복사하지 않고, 변경된 부분만을 처리하는 방식을 적용하기도 한다.

2. Garbage Collection (가비지 컬렉션)

자바스크립트 엔진은 가비지 컬렉션(Garbage Collection)이라는 메커니즘을 사용하여 더 이상 참조되지 않는 객체를 자동으로 메모리에서 해제한다. 따라서 불필요한 메모리 사용은 자동으로 정리되므로 크게 문제가 되지 않는다.