[TYPESCRIPT] 배열과 튜플 다루기 - TypeScript에서 컬렉션을 안전하게 사용하는 방법

TypeScript에서는 데이터를 여러 개 묶어 관리할 때 배열(Array)과 튜플(Tuple)을 사용합니다. 두 타입 모두 JavaScript에 존재하지만, TypeScript에서는 보다 강력한 타입 시스템을 통해 데이터 구조를 더 명확하고 안전하게 다룰 수 있습니다. 

 

배열(Array) 타입

배열은 동일한 타입의 요소들이 순서대로 나열된 자료 구조입니다. TypeScript에서는 두 가지 방식으로 배열 타입을 선언할 수 있습니다.

1. T[] 형태로 선언

let numbers: number[] = [1, 2, 3, 4];
let names: string[] = ["Alice", "Bob", "Charlie"];

2. Array<T> 제네릭 형태로 선언

let scores: Array = [90, 85, 75];
let tags: Array = ["typescript", "javascript"];

두 방식 모두 동일하게 동작하며, 팀 스타일에 따라 선택하면 됩니다.

 

3. 배열의 타입 안정성

배열에는 선언된 타입 이외의 요소를 추가할 수 없습니다.

numbers.push("hello"); 
// ❌ 오류: string은 number[]에 추가 불가

이처럼 TypeScript는 배열 요소 타입을 엄격하게 검사하여 런타임에서 발생할 수 있는 오류를 사전에 예방합니다.

 

4. 배열의 읽기 전용(Readonly) 옵션

readonly 키워드를 사용하면 수정이 불가능한 배열을 만들 수 있습니다.

const roles: readonly string[] = ["admin", "user"];
roles.push("guest");  
// ❌ 오류: 읽기 전용 배열에는 수정 불가

API 응답 데이터나 수정이 일어나면 안 되는 목록을 다룰 때 특히 유용합니다.

 

다차원 배열

배열 안에 배열이 포함된 자료 구조도 안전하게 선언할 수 있습니다.

let matrix: number[][] = [
  [1, 2],
  [3, 4],
  [5, 6]
];

실무에서 표 형태 데이터를 관리하거나 비디오/이미지 처리에서 자주 사용됩니다.

 

튜플(Tuple) 타입

튜플은 정해진 개수와 각 요소의 타입이 고정된 배열입니다. JavaScript에는 없지만 TypeScript에서 강력한 타입 안정성을 제공하는 중요한 기능입니다.

1. 튜플 기본 선언

let user: [number, string] = [1, "Alice"];

이 예제에서:

• 첫 번째 요소: number
• 두 번째 요소: string

순서 또는 타입이 다르면 오류가 발생합니다.

user = ["Alice", 1];  
// ❌ 오류: 순서와 타입이 맞지 않음

 

2. 튜플의 대표적인 실무 활용

1) 좌표, 위치 정보

type Position = [number, number];
const point: Position = [127.12, 37.43];

2) API 응답: 성공/실패 값 반환

function fetchData(): [boolean, string] {
  return [true, "성공"];
}

3) Redux/React useState의 구조 분해

const [count, setCount]: [number, Function] = useState(0);

React의 useState가 바로 튜플 형태로 값을 반환하는 대표적인 예입니다.

 

3. Optional 요소 사용

튜플은 특정 요소를 선택적(Optional)으로 지정할 수 있습니다.

let log: [string, number?];

log = ["INFO"];
log = ["ERROR", 500];

API 로그 구조나 이벤트 파라미터에 매우 적합합니다.

 

배열과 튜플의 차이점 정리

구분	배열(Array)	튜플(Tuple)
요소 개수	제한 없음	정확히 고정됨
요소 타입	모두 동일한 타입	각 요소마다 타입이 다름
실무 활용	리스트/컬렉션	좌표, 응답 구조, 상태 관리

 

타입 안전한 컬렉션 사용을 위한 팁

• 배열은 같은 타입의 데이터를 여러 개 보관할 때 사용
• 튜플은 “정확한 구조”가 필요할 때 사용
• 배열을 수정하면 안 되는 경우 readonly 사용
• 함수 반환 타입으로 튜플을 사용하면 구조가 명확해져 가독성 증가

 

 

TypeScript의 배열과 튜플은 JavaScript보다 훨씬 더 강력한 타입 안정성을 제공합니다. 배열은 일반적인 리스트 자료 구조로 사용하고, 튜플은 정해진 형태의 데이터를 다룰 때 최고의 선택입니다. 두 타입을 정확히 구분해 사용하면 프로젝트의 유지보수성, 가독성, 안정성이 크게 향상됩니다.

다음 글에서는 객체(Object), Interface, Type Alias를 활용한 구조적 타입 시스템을 다뤄보겠습니다.