--- category: Unified tags: [auto-consolidated, technical-documentation] title: [[불변성 (Immutability)|불변성 (Immutability]] last_updated: 2026-05-02 --- # [[불변성 (Immutability)|불변성 (Immutability]] ## 📌 Brief Summary > TypeScript에서 불변성(Immutability)은 주로 `[[readonly|readonly]]` 수식어와 `Readonly` 유틸리티 타입을 통해 컴파일 타임에 데이터가 의도치 않게 변경되는 것을 방지하는 핵심 개념입니다 [1-3]. 이를 통해 객체의 속성이나 배열 요소가 초기화된 이후에 수정되는 것을 엄격히 차단하여 부작용을 줄이고 함수형 프로그래밍 패턴을 지원합니다 [1, 4]. 런타임에 성능 오버헤드를 유발하는 `Object.freeze()`와 달리 컴파일 시점에만 작동하므로, 제로 런타임 비용으로 데이터의 무결성을 보장하는 것이 특징입니다 [1, 3, 5]. --- > 불변성(Immutability)은 초기화 이후 객체의 속성이나 배열 요소와 같은 데이터가 예기치 않게 수정되는 것을 방지하는 개념이다 [1, 2]. TypeScript에서는 주로 `[[readonly|readonly]]` 수식어를 사용하여 런타임 오버헤드 없이 컴파일 타임에 선언적으로 불변성을 강제한다 [2-4]. 이는 의도치 않은 상태 변경이나 데이터 오염을 사전에 방지하여 코드의 예측 가능성을 높이고 버그를 줄이는 데 필수적인 역할을 한다 [4, 5]. ## 📖 Core Content * **불변성 구현 메커니즘 (`readonly`와 `Readonly`)** TypeScript에서는 객체나 클래스의 속성, 배열 정의 시 `readonly` 수식어를 추가하여 초기화 후 값을 변경하는 것을 금지할 수 있습니다 [1, 6, 7]. 또한, 기존 타입의 모든 속성을 읽기 전용으로 변환하는 `Readonly` 유틸리티 타입을 제공하여 설정 객체, API 응답 데이터, 상태 관리(리듀서) 등을 안전하게 보호할 수 있습니다 [2, 7, 8]. * **`const` 및 `Object.freeze()`와의 차이점** 불변성을 강제하는 방식에 있어서 `const`, `Object.freeze()`, 그리고 `readonly`는 명확한 차이를 보입니다. * **`const`**: 런타임에 변수 자체의 재할당을 막지만, 객체 내부 속성의 변경(Mutation)은 막지 못합니다 [3, 5, 9]. * **`Object.freeze()`**: 런타임에 객체 속성 수정을 차단하지만, 얕은(shallow) 동결만 지원하며 런타임 성능 오버헤드가 발생합니다 [3, 10]. * **`readonly`**: 컴파일 타임에 속성 접근 및 수정을 차단하며, 생성된 [[JavaScript|JavaScript]]에는 흔적이 남지 않아 런타임 성능 비용이 전혀 없습니다 [1, 3, 5]. * **얕은 불변성(Shallow Immutability)과 에일리어싱(Aliasing)의 한계** TypeScript의 기본 불변성 기능인 `readonly`나 `Readonly`는 객체의 최상위 속성만 보호하는 얕은 수준의 불변성만 제공합니다 [11-13]. 더 큰 문제점은 '에일리어싱(Aliasing)'입니다. `readonly` 타입으로 보호된 데이터가 변경 가능한(mutable) 매개변수를 기대하는 함수에 전달될 경우, TypeScript는 이를 호환되는 것으로 간주하여 에러를 띄우지 않고, 해당 함수 내부에서 원본 데이터가 변이될 수 있는 취약점이 존재합니다 [14, 15]. * **재귀적 불변성(Deep Readonly)의 구축** 중첩된 객체나 배열 내부 깊숙한 곳까지 완벽하게 불변성을 유지하기 위해서는 기본 기능만으로는 부족합니다 [12]. 이를 극복하기 위해 매핑 타입(Mapped Types)과 조건부 타입(Conditional Types)을 결합하여 내부 속성까지 재귀적으로 `readonly`를 적용하는 커스텀 `[[DeepReadonly|DeepReadonly]]` 유틸리티 타입을 구축해 사용해야 합니다 [12, 13, 16]. 이는 트리 구조나 복잡한 상태 관리 시스템에서 데이터 무결성을 보장하는 강력한 방패 역할을 합니다 [13]. --- * **불변성의 원리와 장점** 런타임에 동작하는 자바스크립트의 `Object.freeze()`와 달리, TypeScript의 `readonly`를 활용한 불변성 구현은 런타임 성능 비용 없이 컴파일 시점의 구조적 타입 체크를 통해 오류를 찾아낸다 [4, 6]. 이는 방어적 코딩을 줄여주며, 예측 가능한 애플리케이션 상태 관리와 함수형 프로그래밍 패턴을 효과적으로 지원한다 [1, 4, 7]. 또한, `const`가 변수의 재할당만을 막는 것에 반해 `readonly`는 참조된 객체 내부의 콘텐츠 자체를 동결시킨다는 점에서 명확히 구별된다 [6, 8]. * **TypeScript에서의 구현 방법** * **객체 및 배열 보호:** 클래스나 인터페이스 내 속성에 `readonly` 키워드를 선언하거나, 배열에 `readonly T[]` 또는 `ReadonlyArray`를 지정하면 값을 변경하는 메서드(`push`, `pop` 등)의 사용이 타입 시스템에서 완전히 제거된다 [9, 10]. * **얕은(Shallow) 불변성과 깊은(Deep) 불변성:** 내장된 `Readonly` 유틸리티나 기본 `readonly` 키워드는 객체의 최상위 속성만 보호하는 얕은 수준의 불변성을 제공하므로, 중첩된 하위 객체의 변경은 막지 못한다 [1, 11, 12]. 중첩 데이터 트리의 완벽한 무결성을 보장하기 위해서는 매핑 타입(Mapped Types)과 조건부 타입(Conditional Types)을 결합하여 재귀적으로 동작하는 `[[DeepReadonly|DeepReadonly]]` 유틸리티 타입을 구축해야 한다 [11, 12]. * **`[[as const|as const]]` 단언:** 객체나 배열 선언 시 `as const`를 함께 사용하면 변수를 리터럴 타입으로 좁히는 동시에 깊은(deep) 읽기 전용 상태를 부여할 수 있다 [13, 14]. * **주의점 및 한계점 (Aliasing 취약성)** `readonly`는 컴파일러가 해당 참조를 통한 직접적인 수정을 막아줄 뿐, 변이가 허용된 다른 변수나 매개변수(별칭, Alias)로 값이 전달될 경우에는 `readonly` 보장이 상실되어 원본 데이터가 변경될 수 있는 취약점이 있다 [15, 16]. 따라서 엄격한 불변성을 유지하려면 함수 서명 단계에서부터 일관되게 `readonly` 매개변수를 강제하도록 설계해야 한다 [16, 17]. ## ⚖️ Trade-offs & Caveats - **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요. - **정책 변화:** Programming & Language 분야의 자동 자산화 수행. --- - **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요. - **정책 변화:** Programming & Language 분야의 자동 자산화 수행. ## 🔗 Knowledge Connections - **Related Topics:** readonly 수식어, [[Readonly 유틸리티 타입|Readonly 유틸리티 타입]], DeepReadonly (재귀적 불변성), 에일리어싱 (Aliasing), 구조적 타이핑 ([[Structural Typing|Structural Typing]]) - **Projects/Contexts:** [[Redux 등 상태 관리 (State Management)|Redux 등 상태 관리 (State Management]], API 응답 데이터 모델링, 글로벌 설정 객체 (Configuration Objects) 보호 - **Contradictions/Notes:** TypeScript의 `readonly`는 완벽한 런타임 불변성을 제공하지 않습니다. 컴파일 타임에만 유효하며 컴파일 후 자바스크립트 코드에서는 해당 제약이 사라집니다 [1]. 또한, 에일리어싱을 통해 `readonly` 배열이 일반 배열 타입으로 취급될 경우 타입 시스템을 우회하여 변이가 일어날 수 있으므로 함수 시그니처 설계 시 주의해야 합니다 [14, 15]. --- *Last updated: 2026-04-18* --- --- - **Related Topics:** [[readonly|readonly]], DeepReadonly, as const, [[구조적 타이핑(Structural Typing)|구조적 타이핑(Structural Typing]] - **Projects/Contexts:** [[상태 관리(State Management)|상태 관리(State Management]], [[TypeScript 타입 시스템 및 인터페이스 설계|TypeScript 타입 시스템 및 인터페이스 설계]] - **Contradictions/Notes:** 자바스크립트의 `Object.freeze()`는 런타임에 직접 객체를 동결하여 보호하지만 성능 저하가 동반되는 반면, TypeScript의 `readonly`는 런타임 성능 저하는 없으나 타입 호환성을 악용한 우회(Aliasing) 변형까지는 완벽히 차단하지 못한다는 한계를 지닌다 [4, 6, 15, 18]. --- *Last updated: 2026-04-18* ---