TypeScript Academy · 강의

ReadonlyArray와 ReadonlyMap

내장 readonly 컬렉션 타입을 사용합니다.

ReadonlyArray와 ReadonlyMap은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

읽기 전용 컬렉션 타입

TypeScript는 배열 외에도 기본 제공 컬렉션의 읽기 전용 변형을 제공합니다. ReadonlyArray<T>, ReadonlyMap<K, V>, ReadonlySet<T>이 이에 해당합니다. 각각 변경하지 않는 API 부분만 노출합니다.

const arr: ReadonlyArray<number> = [1, 2, 3];
console.log(arr.length, arr.includes(2));

ReadonlyArray 복습

ReadonlyArray<T>에서는 순회, 인덱싱, map과 filter 같은 메서드를 사용할 수 있지만, push, pop, 인덱스 할당은 사용할 수 없습니다. 읽기 전용 계열의 배열 형태입니다.

const tags: ReadonlyArray<string> = ['ts', 'js'];
console.log(tags.map((t) => t.toUpperCase()));
// tags.push('css'); // Error

ReadonlyMap

ReadonlyMap<K, V>에서는 값을 조회하고 순회하며 키를 확인할 수 있지만, set, delete, clear는 사용할 수 없습니다. 컬렉션을 사용하는 입장에서는 맵의 내용이 고정됩니다.

const ages: ReadonlyMap<string, number> = new Map([['Ada', 30], ['Sam', 25]]);
console.log(ages.get('Ada'), ages.has('Sam'));
// ages.set('Lee', 40); // Error

ReadonlyMap에서 읽기

모든 읽기 작업은 그대로 남아 있습니다. get, has, size, keys, values, entries, 순회를 사용할 수 있습니다. 변경하는 메서드만 사라집니다.

const m: ReadonlyMap<string, number> = new Map([['a', 1], ['b', 2]]);
for (const [k, v] of m) {
  console.log(k, v);
}
console.log('size:', m.size);

ReadonlySet

ReadonlySet<T>에서는 포함 여부를 확인하고 순회할 수 있지만, add, delete, clear는 사용할 수 없습니다. allowed 값으로 이루어진 고정된 집합에 사용하세요.

const allowed: ReadonlySet<string> = new Set(['read', 'write']);
console.log(allowed.has('read'), allowed.has('delete'));
// allowed.add('admin'); // Error

ReadonlySet 순회하기

ReadonlySet을 순회하고 size를 읽을 수 있지만 내용은 변경할 수 없습니다. 따라서 허용 목록과 권한 집합에 적합합니다.

const perms: ReadonlySet<string> = new Set(['view', 'edit']);
perms.forEach((p) => console.log('perm:', p));
console.log('count:', perms.size);

함수에 읽기 전용 컬렉션 전달하기

읽기만 해야 하는 함수에서는 읽기 전용 컬렉션 타입을 받도록 하세요. 이렇게 하면 의도를 전달하고 함수가 호출자가 소유한 데이터를 변경하지 못하게 할 수 있습니다.

function describe(set: ReadonlySet<string>): string {
  return 'has ' + set.size + ' items';
}
const s = new Set(['x', 'y']);
console.log(describe(s));

변경 가능한 컬렉션은 할당할 수 있습니다

일반 맵이나 집합은 이에 대응하는 읽기 전용 타입에 할당할 수 있습니다. 기능을 확장하는 것이 아니라 제한하는 것이기 때문입니다. 함수는 단순히 변경 권한을 포기합니다.

function keys(m: ReadonlyMap<string, number>): string[] {
  return Array.from(m.keys());
}
const real = new Map([['a', 1]]);
console.log(keys(real));

불변 컬렉션 API

읽기 전용 컬렉션 타입은 불변인 view를 설명합니다. 기반 객체는 다른 곳에서 여전히 변경 가능할 수 있으며, 읽기 전용 타입은 이 참조로 할 수 있는 작업만 제한합니다.

const backing = new Set<number>([1, 2]);
const view: ReadonlySet<number> = backing;
// view.add(3); // Error through the readonly view
backing.add(3); // but the original can still mutate
console.log(view.size);

알맞은 읽기 전용 타입 선택하기

읽기 전용 타입을 데이터 구조에 맞추세요. 순서가 있는 목록에는 ReadonlyArray, 키-값 조회에는 ReadonlyMap, 고유한 포함 여부를 관리할 때는 ReadonlySet을 사용합니다. 각각 해당 구조에 맞는 불변성을 적용합니다.

const roles: ReadonlySet<string> = new Set(['admin', 'user']);
const limits: ReadonlyMap<string, number> = new Map([['admin', 100]]);
console.log(roles.has('user'), limits.get('admin'));

더 안전한 공유 상태

내부 컬렉션을 읽기 전용 타입으로 노출하면 호출자가 모듈의 상태를 손상시키는 일을 막을 수 있습니다. 호출자는 데이터를 자유롭게 살펴볼 수 있지만, 데이터를 변경할 수 있는 것은 여러분의 코드뿐입니다.

class Registry {
  private items = new Set<string>();
  add(name: string): void { this.items.add(name); }
  get all(): ReadonlySet<string> { return this.items; }
}
const r = new Registry();
r.add('a');
console.log(r.all.has('a'));

간단한 확인

읽기 전용 컬렉션 타입에 대한 이해를 확인해 보세요.

복습: 읽기 전용 컬렉션

읽기 전용 컬렉션 계열을 배웠습니다.

ReadonlyArray<T>, ReadonlyMap<K, V>, ReadonlySet<T>은 읽기 작업만 노출합니다.
변경 메서드(set, add, delete, push)는 제거됩니다.
변경 가능한 컬렉션은 이에 대응하는 읽기 전용 타입에 할당할 수 있습니다.
더 안전한 공유 상태를 위해 매개변수와 반환 타입으로 사용하기 좋습니다.

마지막으로 깊은 불변성 패턴을 알아봅니다.

function count(s: ReadonlySet<number>): number {
  return s.size;
}
console.log(count(new Set([1, 2, 3])));

자주 묻는 질문

“ReadonlyArray와 ReadonlyMap” 강의는 무료인가요?

네 — “ReadonlyArray와 ReadonlyMap” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“ReadonlyArray와 ReadonlyMap”에서 뭘 배우나요?

내장 readonly 컬렉션 타입을 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“ReadonlyArray와 ReadonlyMap” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기