유틸리티 타입: Readonly

유틸리티 타입은 TypeScript에서 제공하는 다양한 도구로, 기존 타입을 변형하거나 조작하여 새로운 타입을 생성하는 데 사용됩니다. 그 중 Readonly는 객체의 모든 속성을 읽기 전용으로 만드는 데 사용되는 유틸리티 타입입니다. 이를 통해 객체의 불변성을 보장하고, 의도하지 않은 변경을 방지할 수 있습니다.

1. 기본 개념

• 불변성: 불변성은 데이터 구조가 생성된 후에 수정되지 않도록 하는 것입니다. 이는 코드의 안정성과 예측 가능성을 높이는 데 기여합니다.
• 읽기 전용 속성: Readonly를 사용하면 객체 내의 모든 속성이 읽기 전용이 되어, 해당 속성을 수정할 수 없습니다.

2. Syntax 및 사용법

Readonly<T>는 제네릭 형태로 정의되며, 여기서 T는 읽기 전용으로 만들고자 하는 객체 유형입니다.

type Readonly<T> = {
    readonly [K in keyof T]: T[K];
};

위 코드는 주어진 타입 T의 모든 키 K에 대해 해당 키를 읽기 전용으로 설정합니다.

3. Practical Example

다음은 Readonly를 활용한 간단한 예제입니다:

interface User {
    name: string;
    age: number;
}

const user: Readonly<User> = {
    name: "Alice",
    age: 30,
};

// 아래와 같은 수정 시도가 있을 경우 컴파일 에러 발생
// user.name = "Bob"; // Error: Cannot assign to 'name' because it is a read-only property.
// user.age = 31; // Error: Cannot assign to 'age' because it is a read-only property.

위 예제에서 user 객체는 Readonly<User>로 선언되어 있으며, 이로 인해 이름과 나이를 변경할 수 없습니다. 이러한 특성 덕분에 코드 작성 시 실수로 데이터를 변경하는 것을 방지할 수 있습니다.

4. 응용 사례

• 상태 관리:

  • React와 같은 프레임워크에서는 상태 관리를 할 때 불변성을 유지하는 것이 중요합니다. 상태가 직접적으로 수정되지 않도록 하기 위해 Readonly를 사용할 수 있습니다.

• API 응답 처리:

  • API에서 받은 데이터를 처리할 때 원본 데이터를 보호하기 위해 Readonly를 적용함으로써 데이터 무결성을 유지할 수 있습니다.

function processUser(userData: Readonly<User>) {
    console.log(`Processing user ${userData.name}, age ${userData.age}`);
    
    // userData.name = "Charlie"; // Error! cannot modify the object
}

위 함수에서는 입력받은 사용자 데이터가 읽기 전용이므로 내부 로직에서 값을 변경하려고 하면 오류가 발생하게 됩니다.

5. 요약

• 주요 기능:

  • Readonly<T>는 주어진 객체의 모든 속성을 읽기 전용으로 만들어줍니다.
  • 이를 통해 의도치 않은 데이터 변경을 방지하고 코드 안전성을 높일 수 있습니다.

• 사용 적합 상황:

  • 애플리케이션에서 중요한 데이터나 상태 정보를 다룰 때 유효하며, 특히 외부 입력이나 API 응답 처리를 할 때 매우 유용합니다.

이러한 방식으로 TypeScript의 유틸리티 타í프인 readonly를 활용하면 더 안전하고 유지보수가 용이한 코드를 작성할 수 있습니다.