React에서 데이터의 불변성을 유지하는 것은 애플리케이션의 효율적인 업데이트와 예상치 못한 오류를 방지하는 데 필수적이다. 자바스크립트에서 데이터 타입은 크게 원시 타입과 참조 타입으로 나뉘며, 이들 각각은 불변성과 가변성의 특징을 가진다.
Javascript Type
원시 타입 | Boolean String Number null undefined Symbol | 불변성 immutable |
참조 타입 | Object (Array) | 가변성 mutable |
원시 타입
원시 타입의 데이터는 고정된 크기로
호출 스택(Call Stack) 메모리에 저장되며, 변수에는 실제 데이터 값이 직접 할당된다. 원시 타입의 값을 변경하려면, 새로운 메모리 공간에 새 값을 저장하고 그 주소를 변수에 할당해야 한다. 이러한 특성으로 인해 원시 타입은 자연스럽게 불변성을 가진다.- 고정된 크기로
Call Stack메모리에 저장.
- 변수에 실제 데이터 값이 할당됨.
- 변수에 원시 타입을 재할당하는 경우 기존에 있던 값은
Call Stack메모리에 그대로 남아 있고 새로운 메모리에 값을 저장.
→ 이렇듯 불변성을 가지고 있으므로 신경 쓸 필요가 없다.
참조 타입
참조 타입의 데이터는 크기가 정해져 있지 않으며, 호출 스택 메모리에는 힙(Heap) 메모리의 주소 값(참조 ID)이 저장된다. 실제 데이터는 힙 메모리에 저장되며, 이 데이터를 변경할 경우 호출 스택의 참조 ID는 동일하게 유지되지만 힙 메모리 내의 데이터는 변경된다. 이로 인해 참조 타입은 가변성을 가지며, React에서는 이러한 가변성으로 인해 발생할 수 있는 문제를 주의해야 한다.
- 데이터 크기가 정해져 있지 않고
Call Stack메모리에 저장됨.
- 데이터 값은
Heap메모리에 저장됨.
- 변수에는
Heap메모리의 주소 값(참조 ID)이 할당됨.
배열이나 객체를 변경하는 경우
Call Stack의 참조 ID는 유지되고 Heap 메모리에서는 변경됨.
→ 불변성이 유지되지 않아 React에서 신경 써줘야 한다.
불변성을 지켜야 하는 이유
- 데이터의 예측 가능성: 참조 타입의 데이터가 변할 경우, 원본 데이터가 변경되어 다른 객체에서 예상치 못한 오류가 발생할 수 있다. 불변성을 유지하면 프로그래밍의 복잡성을 줄일 수 있다.
- React의 효율적인 업데이트: React는 이전 상태와 현재 상태를 비교하여 변화가 있을 때만 업데이트를 수행한다. 불변성을 지키면 이러한 비교 과정이 간단해지고, 성능이 향상된다.
불변성을 지키는 방법
기존의 배열이나 객체를 직접 수정하는 대신, 새로운 배열이나 객체를 반환하는 메소드를 사용하여 불변성을 유지할 수 있다. 이는 호출 스택 메모리에 새로운 참조 ID를 생성하게 만든다.
- 불변성을 지키는 메소드:
Spread Operator,map,filter,slice,reduce등
- 불변성을 깨는 메소드:
splice,push등
데이터의 불변성을 유지함으로써, React 애플리케이션은 보다 효율적으로 데이터를 관리하고, 예측 가능하며, 안정적인 상태 변화를 달성할 수 있다.