2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

타입스크립트에서 Readonly 타입은 어떻게 사용하나요?

_____
Q1: TypeScript에서 `Readonly` 타입이란 무엇인가요?
A1: `Readonly` 타입은 객체의 모든 속성을 읽기 전용(read-only)으로 만드는 유틸리티 타입입니다. 즉, 해당 타입으로 선언된 객체의 속성을 수정할 수 없게 만들어 불변성을 유지할 때 사용합니다.

---

Q2: `Readonly` 타입을 사용하는 기본 문법은 어떻게 되나요?
A2: `Readonly`는 제네릭 타입으로, 다음과 같이 사용합니다.
```typescript
interface Person {
name: string;
age: number;
}

const person: Readonly = {
name: 'Alice',
age: 30
};

// person.name = 'Bob'; // 오류: 읽기 전용 속성입니다.
```

---

Q3: `Readonly`를 사용하면 객체 속성을 수정할 수 없나요?
A3: 네, `Readonly` 타입으로 지정된 객체의 모든 속성은 변경이 금지됩니다. 따라서 해당 속성에 값을 다시 할당하면 컴파일 타임에 오류가 발생합니다.

---

Q4: `Readonly`로 만든 타입은 깊은(read-only) 불변성을 보장하나요?
A4: 기본 `Readonly` 타입은 얕은(shallow) 읽기 전용입니다. 즉, 객체의 1단계 속성들만 읽기 전용이고, 중첩된 객체 속성들은 여전히 변경 가능합니다. 깊은 읽기 전용을 만들려면 별도의 재귀 타입을 만들어야 합니다.

예:
```typescript
interface Nested {
inner: {
value: number;
};
}

const obj: Readonly = {
inner: {
value: 10
}
};

obj.inner.value = 20; // 오류 없음, inner 객체는 readonly가 아님
```

---

Q5: 배열에도 `Readonly` 타입을 적용할 수 있나요?
A5: 네, 배열에도 `Readonly`를 적용하면 변경이 불가능한 배열 타입이 됩니다. 이것은 `readonly` 배열 타입(`readonly T[]`)과 유사합니다.

예:
```typescript
const arr: Readonly = [1, 2, 3];

// arr.push(4); // 오류: 읽기 전용 배열입니다.
// arr[0] = 10; // 오류: 읽기 전용 배열입니다.
```

---
Q6: `readonly` 키워드와 `Readonly` 타입의 차이는 무엇인가요?
A6:
- `readonly` 키워드는 인터페이스나 타입 선언 시 속성 앞에 붙여 해당 속성을 읽기 전용으로 만듭니다.
- `Readonly`는 유틸리티 타입으로, 기존 타입 `T`의 모든 속성을 한 번에 읽기 전용으로 만듭니다.

예:
```typescript
interface Example {
readonly prop: string;
}

type ReadonlyExample = Readonly<{
prop: string;
}>;
```

두 방식 모두 결과적으로 속성을 수정할 수 없게 만듭니다.

---

Q7: `Readonly` 타입을 제거하려면 어떻게 하나요?
A7: `Readonly`로 만들어진 타입의 읽기 전용 속성을 수정 가능한 타입으로 바꾸고 싶으면 `-readonly` 매핑된 타입을 사용합니다.

예:
```typescript
type Mutable = {
-readonly [P in keyof T]: T[P];
};

type ReadonlyPerson = Readonly;
type PersonMutable = Mutable;

const person: PersonMutable = { name: 'Alice', age: 30 };
person.name = 'Bob'; // 정상 작동
```

---

Q8: `Readonly` 타입을 사용하는 가장 흔한 사례는 무엇인가요?
A8: 다음과 같은 경우에 주로 사용합니다.
- 객체의 불변성을 보장하고 싶을 때
- 외부에서 객체를 변경하지 못하도록 API 설계 시
- 리덕스(Redux) 상태 관리와 같이 상태 변경을 엄격히 제한해야 할 때
- 함수 파라미터로 전달되는 객체가 변경되지 않도록 안전장치로 사용할 때

---

Q9: `Readonly`의 제약사항이나 주의할 점이 있나요?
A9:
- 기본 `Readonly`는 얕은 불변성을 제공하므로, 중첩된 객체까지 완전한 불변을 원한다면 별도의 깊은 타입 정의가 필요합니다.
- 런타임에는 타입 정보가 사라지므로, 실제 객체 속성 변경을 막지는 못하고 컴파일 단계의 타입 검사에만 도움을 줍니다.
- 함수가 내부에서 매개변수를 변경하지 않는다는 의미를 잘 표현해 코드 안정성에 기여하지만, 외부 함수가 객체를 변경하지 못하도록 하는 방법은 아닙니다.

---

Q10: `Readonly`와 비슷한 타입에는 어떤 것이 있나요?
A10:
- `Partial`: 모든 속성을 선택적(optional)으로 변경
- `Required`: 선택적 속성을 모두 필수(required)로 변경
- `Pick`: 특정 속성만 골라서 타입 생성
- `ReadonlyArray` 또는 `readonly T[]`: 읽기 전용 배열 타입

이들은 모두 타입 안전성을 높이고 타입 변형에 편리한 유틸리티 타입입니다.
타입스크립트에서 `Readonly` 타입은 객체의 프로퍼티를 읽기 전용으로 만들어, 해당 프로퍼티의 값을 변경할 수 없도록 하는 데 사용됩니다.

이는 불변성을 유지하고, 코드의 안정성을 높이는 데 중요한 역할을 합니다.

`Readonly` 타입을 사용하면 객체의 상태를 보호하고, 의도치 않은 변경으로부터 코드를 안전하게 지킬 수 있습니다.

기본 사용법 `Readonly`는 타입스크립트의 내장 유틸리티 타입 중 하나로, 객체 타입을 인자로 받아 모든 프로퍼티를 읽기 전용으로 변환합니다.

기본적인 사용법은 다음과 같습니다: ```typescript interface User { name: string; age: number; } const user: Readonly = { name: "Alice", age: 30 }; // 아래와 같은 변경 시도는 오류를 발생시킵니다.

user.name = "Bob"; // 오류: Cannot assign to 'name' because it is a read-only property. ``` 위의 예제에서 `Readonly`를 사용하여 `user` 객체의 모든 프로퍼티를 읽기 전용으로 만들었습니다.

이제 `name`과 `age` 프로퍼티는 더 이상 수정할 수 없습니다.

ReadonlyArray 타입스크립트는 배열에 대해서도 `ReadonlyArray`라는 타입을 제공합니다.

이 타입은 배열의 요소를 읽기 전용으로 만들어, 배열의 내용을 변경할 수 없도록 합니다.

```typescript const numbers: ReadonlyArray = [1, 2, 3]; // 아래와 같은 변경 시도는 오류를 발생시킵니다.

numbers.push(

4); // 오류: Property 'push' does not exist on type 'readonly number[]'. ``` 위의 예제에서 `numbers`는 `ReadonlyArray` 타입으로 선언되어, 배열의 요소를 추가하거나 삭제하는 등의 변경을 할 수 없습니다.

중첩된 Readonly `Readonly`는 중첩된 객체에도 적용할 수 있습니다.

다음 예제를 살펴보겠습니다: ```typescript interface Address { street: string; city: string; } interface User { name: string; address: Address; } const user: Readonly = { name: "Alice", address: { street: "123 Main St", city: "Wonderland" } }; // 아래와 같은 변경 시도는 오류를 발생시킵니다.

user.address.city = "New Wonderland"; // 오류: Cannot assign to 'city' because it is a read-only property. ``` 위의 예제에서 `User` 객체의 `address` 프로퍼티 또한 `Readonly`로 선언되어, 내부의 `city` 프로퍼티도 읽기 전용이 됩니다.

Readonly와 타입 추론 타입스크립트는 `Readonly`를 사용하여 타입 추론을 할 수 있습니다.

예를 들어, 함수의 매개변수로 `Readonly` 타입을 사용할 수 있습니다: ```typescript function printUser(user: Readonly) { console.log(user.name); console.log(user.age); } // user 객체를 전달할 수 있지만, 수정할 수는 없습니다.

printUser(user); ``` 이렇게 하면, `printUser` 함수 내에서 `user` 객체를 수정할 수 없도록 보장할 수 있습니다.

결론 타입스크립트의 `Readonly` 타입은 객체의 불변성을 유지하고, 코드의 안정성을 높이는 데 유용한 도구입니다.

객체의 프로퍼티를 읽기 전용으로 만들고, 배열의 요소를 수정할 수 없도록 하는 기능을 제공하여, 의도치 않은 변경으로부터 코드를 보호합니다.

이러한 특성 덕분에, 대규모 애플리케이션에서 상태 관리와 데이터 흐름을 보다 안전하게 처리할 수 있습니다.

`Readonly`와 `ReadonlyArray`를 적절히 활용하면, 코드의 가독성과 유지보수성을 높일 수 있습니다.

작성자: 박지수 [비회원] | 작성일자: 1년 전 2024-09-10 05:32:13
조회수: 223 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.