불변성이란?

불변성이란

불변성이란 기존 데이터를 직접 변경하지 않고, 새로운 값을 생성하여 상태 변화를 표현하는 성질을 의미합니다.

자바스크립트에서 원시 타입은 한 번 생성된 값을 수정할 수 없기 때문에 자연스럽게 불변성을 가지며, 객체와 배열 같은 참조 타입은 내부 값을 변경할 수 있어 가변성을 가집니다.

불변성이 중요한 이유

• 변경 전/후 상태가 명확히 분리되어 디버깅과 로직 이해가 쉬워지기 때문에 상태변화 추적이 용이해집니다.
• 기존 데이터를 직접 수정하지 않기 때문에 예상치 못한 값 변경을 방지하여 사이드 이펙트를 줄일 수 있습니다.
• 이로 인해 안정적인 동작을 보장하고 협업과 유지보수에 유리한 구조를 만들 수 있습니다.

불변성을 지키는 방법

참조 타입 복사 시 재귀 기반 복사, 또는 Immer 같은 라이브러리등을 활용하여 데이터의 불변성을 유지하도록 합니다.

객체 : 기존 객체를 직접 수정하지 않고 새 객체를 생성하여 반환.
배열 : 동일한 새 배열을 생성.


코드 예시

// ---------- 객체
// 잘못된 예 (가변)
user.name = ""Kim""

// 올바른 예 (불변)
const newUser = { ...user, name: ""Kim"" }


// ---------- 배열
// 가변
arr.push(4)

// 불변
const newArr = [...arr, 4]