[React] 객체의 가변성과 불변성

자바스크립트에서 객체의 가변성과 불변성은 객체가 변경 가능한지 여부를 나타냅니다.

객체의 가변성(Mutability)은 해당 객체가 생성된 이후에도 내부 상태를 변경할 수 있는 능력을 말합니다.

즉, 객체의 내부 속성을 변경할 수 있습니다. 예를 들어, 다음과 같이 객체를 생성하고 객체의 속성을 변경할 수 있습니다.

객체의 불변성(Immutability)은 해당 객체가 생성된 이후에는 내부 상태를 변경할 수 없는 능력을 말합니다. 객체를 변경할 경우, 새로운 객체를 생성하고 기존 객체를 변경하지 않습니다.

예를 들어 다음과 같이 객체를 생성하고 객체의 속성을 변경할 수 없습니다.

 

React에서 불변성은 매우 중요합니다. React는 Virtual DOM을 사용하여 컴포넌트의 상태가 변경될 때마다 새로운 Virture DOM을 생성하고 기존 Virtual DOM과 비교하여 변경된 부분만 실제 DOM에 적용합니다.

만약 컴포넌트의 상태가 가변성을 가지고 있다면, React는 이전 상태와 현재 상태를 비교할 때 문제가 발생할 수 있습니다.

따라서 React에서는 상태(state)를 변경할 때 불변성을 유지해야 합니다. 예를 들어, 다음과 같이 상태를 변경할 수 있습니다.

 

이처럼 불변성을 유지하는 것은 React 컴포넌트의 성능을 향상시키고, 예측 가능한 동작을 유지하는 데 중요합니다.