[TypeScript] 3편. 배열, 객체, 튜플 타입 정리

[TypeScript] 3편. 배열, 객체, 튜플 타입 정리

이번 글에서는 TypeScript에서 여러 값을 묶어서 다루는 방법을 정리해보겠습니다. 앞글에서는 string, number, boolean 같은 기본 타입을 살펴봤습니다.

하지만 실제 프로젝트에서는 하나의 값만 다루는 경우보다 여러 값을 배열로 관리하거나, 사용자 정보처럼 여러 속성을 가진 객체를 다루는 경우가 훨씬 많습니다. 그래서 이번 글에서는 배열 타입, 객체 타입, 튜플 타입을 차근차근 정리해보겠습니다.

---

1. 배열 타입

배열은 같은 종류의 값을 여러 개 담을 때 사용합니다. TypeScript에서는 배열 안에 어떤 타입의 값이 들어갈지 미리 지정할 수 있습니다.

let names: string[] = ["Kim", "Lee", "Park"];
let scores: number[] = [90, 85, 100];
let checks: boolean[] = [true, false, true];

위 코드에서 string[]은 문자열만 들어가는 배열을 의미합니다. number[]는 숫자만 들어가는 배열, boolean[]은 참과 거짓 값만 들어가는 배열입니다.

배열 타입 기본 형태
타입[] 형태로 작성합니다.
예: string[], number[], boolean[]

---

2. Array 문법으로 배열 타입 작성하기

배열 타입은 다른 방식으로도 작성할 수 있습니다. Array<타입> 형태를 사용할 수도 있습니다.

let names: Array<string> = ["Kim", "Lee", "Park"];
let scores: Array<number> = [90, 85, 100];

string[]과 Array<string>은 같은 의미입니다. 실무에서는 보통 string[] 형태를 더 많이 사용합니다.

---

3. 배열 타입을 잘못 사용한 경우

배열 타입을 지정하면 배열 안에 다른 타입의 값이 들어가는 것을 막을 수 있습니다.

let numbers: number[] = [1, 2, 3];

numbers.push(4);
numbers.push("hello"); // 오류

numbers는 number[] 타입이기 때문에 숫자만 추가할 수 있습니다. 문자열을 넣으려고 하면 TypeScript가 오류를 알려줍니다.

핵심
배열 타입을 지정하면 배열 안에 들어갈 값의 종류를 제한할 수 있습니다. 덕분에 잘못된 데이터가 배열에 들어가는 실수를 줄일 수 있습니다.

---

4. 객체 타입

객체는 여러 속성을 하나로 묶어서 표현할 때 사용합니다. 사용자 정보, 게시글 정보, 상품 정보처럼 여러 데이터를 하나의 단위로 관리할 때 객체를 사용합니다.

let user: {
  name: string;
  age: number;
  isAdmin: boolean;
} = {
  name: "GWDEVEL",
  age: 25,
  isAdmin: false,
};

위 코드에서는 user 객체가 가져야 하는 속성과 각 속성의 타입을 미리 지정했습니다.

즉, name은 문자열이어야 하고, age는 숫자여야 하며, isAdmin은 불리언 값이어야 합니다.

---

5. 객체 타입에서 속성이 빠진 경우

객체 타입을 지정하면 필요한 속성이 빠졌을 때도 오류를 확인할 수 있습니다.

let user: {
  name: string;
  age: number;
} = {
  name: "GWDEVEL",
};

위 코드는 age 속성이 없기 때문에 오류가 발생합니다. 객체 타입에 age가 필요하다고 정했기 때문입니다.

이처럼 TypeScript는 객체에 필요한 속성이 제대로 들어갔는지 확인해줍니다.

---

6. 선택적 속성

객체의 모든 속성이 항상 필요한 것은 아닙니다. 예를 들어 사용자 정보에서 이메일은 있을 수도 있고 없을 수도 있습니다. 이럴 때는 속성 이름 뒤에 ?를 붙입니다.

let user: {
  name: string;
  age: number;
  email?: string;
} = {
  name: "GWDEVEL",
  age: 25,
};

email?: string은 이메일 속성이 있어도 되고 없어도 된다는 뜻입니다. 이런 속성을 선택적 속성이라고 합니다.

?는 객체 속성이 선택 사항이라는 의미입니다. API 응답값이나 사용자 입력값처럼 데이터가 항상 존재하지 않을 수 있는 경우에 자주 사용합니다.

---

7. readonly 속성

객체 속성 중에는 한 번 정해지면 바뀌면 안 되는 값도 있습니다. 예를 들어 사용자 고유 ID는 중간에 변경되면 안 됩니다. 이럴 때는 readonly를 사용할 수 있습니다.

let user: {
  readonly id: number;
  name: string;
} = {
  id: 1,
  name: "GWDEVEL",
};

user.name = "TypeScript";
user.id = 2; // 오류

readonly가 붙은 속성은 처음 값을 정한 뒤 다시 변경할 수 없습니다.

이 기능은 실수로 중요한 값을 바꾸는 것을 막는 데 도움이 됩니다.

---

8. type으로 객체 타입 분리하기

객체 타입을 변수에 직접 작성하면 코드가 길어질 수 있습니다. 같은 구조를 여러 번 사용해야 한다면 type을 이용해서 타입을 따로 분리하는 것이 좋습니다.

type User = {
  id: number;
  name: string;
  email?: string;
};

let user1: User = {
  id: 1,
  name: "GWDEVEL",
};

let user2: User = {
  id: 2,
  name: "TypeScript",
  email: "dev@gwdevel.com",
};

User라는 타입을 만들어두면 같은 사용자 구조를 여러 곳에서 재사용할 수 있습니다.

실제 프로젝트에서는 객체 타입을 직접 반복해서 작성하기보다 type이나 interface로 분리해서 사용하는 경우가 많습니다.

---

9. 객체 배열 타입

실제 프로젝트에서는 객체 하나만 다루는 것보다 객체 여러 개를 배열로 관리하는 경우가 많습니다. 예를 들어 사용자 목록, 게시글 목록, 댓글 목록이 여기에 해당합니다.

type User = {
  id: number;
  name: string;
};

let users: User[] = [
  { id: 1, name: "Kim" },
  { id: 2, name: "Lee" },
  { id: 3, name: "Park" },
];

User[]는 User 타입의 객체가 여러 개 들어가는 배열이라는 뜻입니다.

React에서 목록을 렌더링하거나, API로 받아온 데이터를 화면에 출력할 때 이런 형태를 자주 사용합니다.

---

10. 튜플 타입

튜플은 배열과 비슷하지만, 들어가는 값의 개수와 순서가 정해져 있는 타입입니다.

let userInfo: [string, number] = ["GWDEVEL", 25];

위 코드에서 userInfo는 첫 번째 값이 문자열이고, 두 번째 값이 숫자인 배열입니다. 순서가 바뀌면 오류가 발생합니다.

let userInfo: [string, number] = [25, "GWDEVEL"]; // 오류

튜플은 일반 배열보다 더 엄격합니다. 각 위치에 어떤 타입이 들어가야 하는지까지 정할 수 있습니다.

---

11. 배열과 튜플의 차이

배열과 튜플은 둘 다 여러 값을 담을 수 있지만, 사용 목적이 다릅니다.

구분	배열	튜플
값의 개수	자유로움	정해져 있음
값의 순서	크게 중요하지 않을 수 있음	중요함
사용 예시	사용자 목록, 게시글 목록	좌표, 고정된 데이터 묶음

배열은 같은 종류의 데이터를 여러 개 담을 때 좋고, 튜플은 정해진 순서와 개수를 가진 데이터를 표현할 때 좋습니다.

---

12. 튜플 사용 예시

튜플은 좌표처럼 정해진 위치에 정해진 타입의 값이 들어가야 하는 경우에 사용할 수 있습니다.

let position: [number, number] = [127.123, 37.456];

위 코드에서 첫 번째 값과 두 번째 값은 모두 숫자입니다. 좌표처럼 값의 개수와 순서가 중요할 때 튜플을 사용할 수 있습니다.

또 다른 예시로는 상태값과 상태 변경 함수를 함께 묶는 구조가 있습니다. React의 useState도 튜플과 비슷한 형태로 이해할 수 있습니다.

let state: [string, () => void] = [
  "loading",
  () => {
    console.log("상태 변경");
  },
];

---

13. Mini Bot 프로젝트 예시

채팅 봇 프로젝트를 만든다고 생각해보겠습니다. 채팅 메시지는 보통 작성자, 내용, 생성 시간 같은 정보를 가지고 있습니다. 이런 데이터는 객체 타입으로 표현하기 좋습니다.

type ChatMessage = {
  id: number;
  sender: "user" | "bot";
  content: string;
  createdAt: string;
};

let messages: ChatMessage[] = [
  {
    id: 1,
    sender: "user",
    content: "안녕하세요",
    createdAt: "2026-05-21",
  },
  {
    id: 2,
    sender: "bot",
    content: "안녕하세요! 무엇을 도와드릴까요?",
    createdAt: "2026-05-21",
  },
];

ChatMessage[]는 채팅 메시지 객체들이 들어있는 배열입니다. 이렇게 타입을 정해두면 메시지 데이터의 구조를 한눈에 파악할 수 있습니다.

또한 sender 값은 "user" 또는 "bot"만 허용되도록 제한했습니다. 이런 방식은 나중에 Union Type을 배울 때 더 자세히 정리하겠습니다.

---

14. 이번 글 핵심 정리

개념	설명	예시
배열 타입	같은 타입의 값을 여러 개 담는 타입	string[]
객체 타입	여러 속성을 하나로 묶는 타입	{ name: string; age: number; }
선택적 속성	있어도 되고 없어도 되는 속성	email?: string
readonly	수정할 수 없는 속성	readonly id: number
튜플 타입	개수와 순서가 정해진 배열 타입	[string, number]

---

15. 마무리

이번 글에서는 TypeScript에서 여러 값을 다루는 방법인 배열, 객체, 튜플 타입을 정리했습니다.

배열은 같은 타입의 값을 여러 개 담을 때 사용하고, 객체는 여러 속성을 하나로 묶을 때 사용합니다. 튜플은 배열과 비슷하지만 값의 개수와 순서가 정해져 있다는 점이 다릅니다.

TypeScript에서 중요한 것은 단순히 타입 문법을 외우는 것이 아니라, 데이터가 어떤 구조로 움직이는지 코드에 명확하게 표현하는 것입니다.

다음 글에서는 함수에 타입을 지정하는 방법을 정리해보겠습니다. 매개변수 타입, 반환 타입, 선택적 매개변수, 함수 타입 별칭까지 차근차근 살펴보겠습니다.

GWDEVELBlog
TypeScript 개념노트 시리즈 3편