[React] 불변성이 뭘까? 불변성을 지켜야 하는 이유, 배열과 객체의 불변성을 지키는 방법.

 

 

불변성(Immutability)란 객체나 데이터 구조가 생성된 이후에는 변경되지 않음을 의미합니다.

즉, 한번 생성된 객체는 그 상태를 변경할 수 없는 것을 말합니다.

불변성은 수정 불가능한(Immutable) 데이터를 사용하고 데이터의 변경이 필요한 경우에는 새로운 객체나 데이터 구조를 생성하여 기존 데이터를 복사하고 수정하는 방식으로 처리합니다.

 

여러 이점과 효과를 가지고 있으며, 다음과 같은 특징을 가지고 있습니다.

 

1. 변경 추적 : 불변성을 유지하면 데이터가 변경될 때마다 새로운 객체나 데이터 구조가 생성되기 때문에 변경을 추적하기 쉽습니다.

이전 상태와 비교하여 변경 사항을 파악할 수 있습니다.

2. 예측 가능한 동작 : 불변성은 데이터의 상태 변화를 방지하므로 코드의 동작을 예측하기 쉽고 디버깅이나 테스트에 용이합니다.

3. 성능 최적화 : 불변성은 변경된 데이터를 추적하고 변경 사항을 감지하기 쉽게 만들어 성능 최적화에 도움을 줍니다.

변경 사항이 있는 부분만 업데이트하고 불필요한 리렌더링을 방지할 수 있습니다.

4. 스레드 안정성 : 불변성은 여러 스레드 또는 병렬 작업에서 데이터의 안정성과 동시성을 보입니다.

데이터가 변경되지 않기 때문에 동시에 여러 작업이 수행되어도 안전합니다.

5. 함수형 프로그래밍과의 일관성 : 불변성은 함수형 프로그래밍 패러다임과 잘 어울리며 순수 함수를 사용하여 부작용을 최소화하는 함수형 프로그래밍의 일관성을 유지합니다.

 

불변성은 React와 같은 아리브러리나 프레임워크에서도 중요한 개념으로 사용됩니다.

React에서는 상태 관리를 위해 불변성을 유지하는 것이 성능 및 개발 경험에 도움이 됩니다.

또한, 함수형 프로그래밍이나 데이터 구조의 안정성과 변화의 추적, 예측 가능성을 필요로 하는 많은 프로그래밍 패러다임에서 불변성은 중요한 개념입니다.

 

다음은, 배열과 객체로 불변성을 지키면서 값을 업데이트 하는 방법입니다.

 

1. 배열

배열에 값을 추가하거나 수정할 때는 배열 전개 연산자('...')를 사용하여 새로운 배열을 생성하고, 값을 추가하거나 수정합니다.

 

• 값 추가

const newArray = [...oldArray, newValue];

• 값 수정

const newArray = oldArray.map((item,index)=>index===targetIndex ? newValue : item);

 

2. 객체

객체의 속성을 추가, 수정 또는 삭제할 때는 객체 전개 연산자('...')를 사용하여 새로운 객체를 생성하고, 속성을 추가, 수정 또는 삭제합니다.

• 속성 추가

const newObject = { ...oldObject, newProperty: newValue };

• 속성 수정

const newObject = { ...oldObject, existingProperty: newValue };

• 속성 삭제

const { propertyToDelete, ...newObject } = oldObject;