28. 코드 작성 시 불변성이 중요한 이유 설명
JavaScript에서 불변성(immutability)이 중요한 이유는 코드의 예측 가능성, 디버깅의 용이성, 효율적인 상태 관리를 가능하게 하기 때문.
- 상태 변경 추적의 용이성
불변성을 유지하면 데이터가 변경되지 않으므로, 상태가 언제, 어디서, 어떻게 변경되었는지 명확히 알 수 있습니다. 이는 디버깅과 문제 원인 분석을 훨씬 더 쉽게 만들어 줍니다.
예 : 객체를 복사하여 새로운 객체를 생성하고 수정하면 원본 데이터는 그대로 유지됩니다.
javascript
const obj = { a: 1 };
const newObj = { ...obj, b: 2 };
// obj는 변경되지 않음- 사이드 이펙트 방지
불변성을 지키면 함수나 메서드가 외부 데이터를 직접 수정하지 않아 예상치 못한 부작용(side effects)을 방지할 수 있습니다. 이는 순수 함수(pure function)를 작성하는 데 필수적입니다.
예: 원본 배열을 변경하지 않는 방식
javascript
코드 복사
const arr = [1, 2, 3];
const newArr = arr.map(num => num * 2);
// arr은 그대로 유지됨- 리액트(React)와 같은 라이브러리와의 호환성
React와 같은 라이브러리는 상태 변경을 감지하고 UI를 효율적으로 업데이트하기 위해 불변성을 전제로 합니다. 객체나 배열이 불변하지 않으면 변경 사항을 감지하기 어려워지고, 잘못된 상태로 이어질 수 있습니다.
예: React의 상태 업데이트
javascript
코드 복사
// 상태 업데이트 시, 원본을 변경하지 않고 새로운 객체 생성
setState(prevState => ({ ...prevState, newKey: 'newValue' }));-
의도한 데이터 흐름 보장
불변성은 데이터가 한 방향으로만 흐르도록 보장합니다(예: Flux 패턴, Redux). 데이터가 예기치 않게 변경되지 않으므로 데이터 흐름이 더 명확하고 유지보수가 용이해집니다. -
성능 최적화
불변성은 데이터가 변경되지 않음을 보장하므로, 동일한 데이터 구조가 재사용될 수 있습니다. 이는 구조적 공유와 메모리 사용 최적화에 유리하며, 변경 여부를 확인하기 위한 비교 연산을 단순화합니다.
예: 깊은 비교 대신 얕은 비교로 성능 최적화
javascript
코드 복사
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 };
console.log(obj1 === obj2); // false (새 객체 생성)요약
불변성을 유지하면 데이터 관리와 상태 변화의 예측 가능성이 높아지고, 부작용을 방지하며, 유지보수성과 성능까지 향상됩니다. 이는 현대 JavaScript 애플리케이션 개발의 핵심 원칙 중 하나로 자리 잡고 있습니다.
- Immutable(불변) 값
불변 값은 생성된 이후에 절대 변경되지 않는 데이터입니다. 새로운 값을 할당하면 메모리에서 새로운 공간이 할당됩니다.
불변 값의 예:
기본형(Primitive Types):
String
Number
Boolean
BigInt
Symbol
undefined
null
특징:
값을 변경하려면 새로운 값으로 재할당해야 함.
동일한 값을 다시 할당해도 기존 값을 수정하지 않고 새로운 메모리 공간에 저장.
예제:
javascript
코드 복사
let str = "Hello";
str[0] = "J"; // 문자열은 불변이라 변경되지 않음
console.log(str); // "Hello"
str = "JavaScript"; // 새로운 문자열로 재할당
console.log(str); // "JavaScript"- Mutable(변경 가능) 값
변경 가능한 값은 생성된 이후에도 내용을 수정하거나 변경할 수 있는 데이터입니다.
mutable 값의 예:
참조형(Reference Types):
Object (객체)
Array (배열)
Function
Map
Set
사용자 정의 클래스 인스턴스
특징:
변수 자체는 참조값을 저장하고, 참조값이 가리키는 메모리 내의 데이터는 변경 가능.
동일한 메모리 위치에서 데이터를 수정할 수 있음.
예제:
javascript
코드 복사
let obj = { name: "Alice" };
obj.name = "Bob"; // 객체의 프로퍼티는 변경 가능
console.log(obj); // { name: "Bob" }
let arr = [1, 2, 3];
arr.push(4); // 배열에 값을 추가
console.log(arr); // [1, 2, 3, 4]
불변을 유지하기 위한 방법
참조형 데이터에서도 불변성을 유지하려면 객체와 배열을 수정하지 않고 새로운 값을 만들어야 합니다. 이를 위해 ES6+ 문법과 라이브러리를 활용할 수 있습니다.
객체의 불변성 유지
javascript
코드 복사
const obj = { name: "Alice", age: 25 };
const newObj = { ...obj, age: 26 }; // Spread 연산자로 새로운 객체 생성
console.log(obj); // { name: "Alice", age: 25 }
console.log(newObj); // { name: "Alice", age: 26 }배열의 불변성 유지
javascript
코드 복사
const arr = [1, 2, 3];
const newArr = [...arr, 4]; // Spread 연산자로 새로운 배열 생성
console.log(arr); // [1, 2, 3]
console.log(newArr); // [1, 2, 3, 4]라이브러리 활용
불변성을 강화하려면 Immutable.js와 같은 라이브러리를 사용할 수 있습니다.
javascript
코드 복사
const { Map } = require("immutable");
const map1 = Map({ a: 1 });
const map2 = map1.set("a", 2);
console.log(map1.get("a")); // 1
console.log(map2.get("a")); // 2