Typescript 완벽 가이드｜기초부터 실전까지 한 번에 정리 - 7강

네, 7강에 오신 것을 환영합니다! 럭키 세븐이네요. 🎰 6강에서 **유니온 타입(|)**을 배우면서 "success" | "error" 같은 코드를 잠깐 보셨죠? "어? 타입 자리에 string이 아니라 구체적인 단어가 들어갔네?" 하고 느끼셨다면 눈썰미가 대단하신 겁니다.

오늘은 바로 그 **"딱 정해진 값만 받겠다!"**는 기술, 리터럴 타입과 Enum을 배워보겠습니다.

---

🚀 제7강. 리터럴 타입과 Enum: "메뉴판에 있는 것만 시키세요!"

식당에 가서 "밥 주세요"(string)라고 하면 주인이 곤란하겠죠? "김치볶음밥" 아니면 "오므라이스" 중에 하나를 콕 집어야 합니다. 타입스크립트도 변수에게 **"너는 아무 문자열이나 되지 말고, 딱 이 단어들 중 하나만 가져!"**라고 명령할 수 있습니다.

1. 리터럴 타입 (Literal Types): "구체적인 값 그 자체"

string, number 같은 뭉뚱그린 타입 대신, 값 그 자체를 타입으로 씁니다. 주로 **유니온 타입(|)**과 짝꿍으로 다닙니다.

💡 비유: 자판기 버튼입니다. '콜라', '사이다', '환타' 버튼만 있습니다. '우유' 버튼은 없어서 누를 수(입력할 수) 없습니다.

① 코드 예시

TypeScript

 

// 문자열은 문자열인데, 오직 이 3가지 단어만 허용!
type ButtonSize = "small" | "medium" | "large";

let myBtn: ButtonSize = "small"; // OK
// myBtn = "extra-large"; // 🚨 에러! "그런 사이즈는 안 팝니다."

② [실무 핵심] React 컴포넌트 Props에서 ⭐️ React 버튼 컴포넌트를 만들 때 정말 많이 씁니다. 오타를 완벽하게 방지해주죠.

TypeScript

 

interface ButtonProps {
  // 테마는 딱 2가지만 있다!
  theme: "light" | "dark"; 
  label: string;
}

// 나중에 쓸 때:
// <Button theme="lite" ... />  <-- 'light' 오타 내면 바로 빨간 줄!

2. Enum (열거형): "이름표 붙인 상수들의 집합"

비슷한 기능인데, 관련된 상수들을 그룹으로 묶어서 관리하는 문법입니다. 다른 언어(Java, C#)에서 온 분들에게 익숙합니다.

① 코드 예시

TypeScript

 

// 메뉴판을 미리 만들어두는 느낌
enum UserRole {
  ADMIN = "ADMIN",
  USER = "USER",
  GUEST = "GUEST"
}

let myRole: UserRole = UserRole.ADMIN;

3. 선생님의 솔직한 조언: "뭘 써야 하나요?" 🤔 (중요!)

이건 실무에서도 의견이 갈리지만, 최신 프론트엔드(React/Next.js) 트렌드를 딱 정해드릴게요.

🔥 요즘 트렌드: **리터럴 타입(1번)**을 훨씬 더 많이 씁니다.

이유:

1. 코드가 더 간결함: UserRole.ADMIN 처럼 길게 안 쓰고 그냥 "ADMIN"이라고 쓰면 됩니다.
2. 번들 용량: Enum은 자바스크립트로 변환될 때 꽤 복잡한 코드가 생성되지만, 리터럴 타입은 0바이트로 사라집니다(가볍습니다).
3. 직관적임: 마우스를 올렸을 때 "small" | "medium" 하고 바로 보입니다.

결론: 특별한 이유가 없다면 리터럴 타입 + 유니온 조합을 먼저 고려하세요!

---

✍️ 7강 미니 퀴즈 & 실습

개념이 잡혔는지 확인해 볼까요?

문제 1. (코드 작성 - 리터럴 타입) 신호등 색깔을 저장하는 타입 TrafficLight를 만들어주세요. 오직 "red", "yellow", "green" 3가지 문자열만 허용해야 합니다.

TypeScript

 

type TrafficLight = // 여기에 코드를 작성하세요

문제 2. (에러 찾기) 다음 코드에서 에러가 나는 이유는 무엇일까요?

TypeScript

 

type Direction = "UP" | "DOWN" | "LEFT" | "RIGHT";

function move(dir: Direction) {
  console.log(dir + "로 이동!");
}

move("Up"); // 🚨 에러 발생!

1. move 함수가 void를 리턴해서
2. "Up"은 "UP"과 달라서 (대소문자 차이)
3. Direction은 enum이 아니라서

---

✅ 정답 및 해설

• 문제 1 정답:
  • 해설: 아주 간단하죠? 이렇게 해두면 나중에 "blue" 같은 엉뚱한 색을 넣는 실수를 원천 봉쇄할 수 있습니다.
• TypeScript

   

  type TrafficLight = "red" | "yellow" | "green";
  

• 문제 2 정답: 2번
  • 해설: 리터럴 타입은 토씨 하나 틀리면 안 됩니다. "UP"과 "Up"은 컴퓨터에게 완전히 다른 글자입니다. 오타나 대소문자 실수를 잡아주는 강력한 기능이죠!

---

고생하셨습니다! 👏 이제 여러분은 변수에 아무 값이나 넣지 않고, **원하는 값 목록(화이트리스트)**을 딱 정해서 관리하는 능력을 얻었습니다. 여기까지가 타입스크립트의 기본적인 타입 정의 방법들이었습니다.

이제 8강에서는 조금 더 구조적인 문법인 **'클래스(Class)'**를 배울 차례입니다. "어? React 함수형 컴포넌트 쓰는데 클래스 몰라도 되지 않나요?" 라고 하실 수 있지만, 타입스크립트의 private, public 같은 접근 제어자 개념은 알아두면 데이터 관리할 때 정말 유용합니다. 아주 짧고 굵게 핵심만 짚어드릴게요.