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

반갑습니다! 6강까지 오시다니, 이제 정말 타입스크립트와 친해지신 것 같네요. 🏃‍♂️💨

우리가 5강 마지막에 살짝 맛봤던 **'합체'**와 **'선택'**의 기술을 본격적으로 배워볼 시간입니다. 이 기능을 알면 코드가 아주 유연해집니다. 딱딱한 타입스크립트를 말랑말랑하게 만드는 비법이죠!

---

🚀 제6강. 유니온 타입과 인터섹션: "또는(|) 그리고(&)"

1. 유니온 타입 (Union Type): "이거 아니면 저거 (OR)"

유니온(Union)은 **'합집합'**입니다. 파이프 기호 | (Shift + 백슬래시)를 사용합니다. "A 타입이어도 되고, B 타입이어도 돼!" 라고 허락해 주는 것이죠.

💡 비유: 짬짜면 그릇입니다. 🍜 짜장면(A)을 담아도 되고, 짬뽕(B)을 담아도 됩니다. (물론 둘 다 담을 수 있는 그릇이죠).

① 기본 사용법 변수 하나에 숫자도 넣고 싶고 문자도 넣고 싶을 때 씁니다.

TypeScript

 

// 숫자여도 되고, 문자여도 됩니다.
let id: string | number;

id = "user_123"; // OK
id = 123;        // OK
// id = true;    // 🚨 에러! (boolean은 허락 안 함)

② [실무 핵심] React에서의 활용 ⭐️ React를 하다 보면 **"데이터가 아직 안 왔을 때(로딩 중)"**를 처리해야 합니다. 이때 데이터는 '있을 수도 있고', '없을 수도(null)' 있죠.

TypeScript

 

// 유저 정보가 있을 수도 있고(User), 아직 없을 수도 있음(null)
type User = { name: string; age: number };

// React의 useState에서 정말 많이 봅니다!
const [user, setUser] = useState<User | null>(null);

이렇게 하면 user 변수는 처음엔 null이었다가, 나중에 데이터가 로딩되면 User 객체로 바뀔 수 있게 됩니다.

2. 인터섹션 타입 (Intersection Type): "너랑 나랑 합체 (AND)"

인터섹션(Intersection)은 **'교집합'**이라는 뜻이지만, 실제로는 **'합체(Fusion)'**에 가깝습니다. 앤퍼센트 기호 &를 사용합니다. "A 타입의 특징도 갖고 있고, B 타입의 특징도 다 가져야 해!" 라는 뜻입니다.

💡 비유: 스마트폰입니다. 📱 전화기(A) 기능도 있어야 하고, 그리고(&) 카메라(B) 기능도 있어야 스마트폰이라고 부를 수 있죠.

① 기본 사용법 두 개의 타입을 합쳐서 새로운, 더 강력한 타입을 만듭니다.

TypeScript

 

type IronMan = { fly: () => void };
type CaptainAmerica = { shield: boolean };

// 두 영웅의 능력을 합친 '어벤져스' 타입 탄생!
type Avengers = IronMan & CaptainAmerica;

const hero: Avengers = {
  fly: () => console.log("슈웅~"), // IronMan 속성 필수
  shield: true                     // CaptainAmerica 속성 필수
};

만약 하나라도 빼먹으면? "어벤져스 자격 미달이야!" 라며 에러가 납니다.

② [실무 핵심] 언제 쓸까요? 주로 남이 만든 타입에 내 입맛대로 속성을 추가하고 싶을 때 씁니다. (5강에서 배운 extends와 비슷하죠?)

TypeScript

 

// 1. 기본 버튼 타입 (남이 만든 것)
type ButtonProps = {
  color: string;
  onClick: () => void;
};

// 2. 내가 만든 아이콘 버튼 (기본 버튼 + 아이콘 속성 추가)
type IconButtonProps = ButtonProps & {
  iconName: string;
};

---

⚠️ 주의할 점 (초보자가 자주 하는 실수)

유니온 타입(|)을 쓸 때 주의하세요. "문자열(string) 또는 숫자(number)야" 라고 하면, 타입스크립트는 보수적으로 **"둘 다 공통적으로 가지고 있는 기능"**만 쓰게 해줍니다.

TypeScript

 

function printId(id: string | number) {
  // console.log(id.toUpperCase()); 
  // 🚨 에러! 숫자가 들어올 수도 있는데 대문자 변환(toUpperCase)을 어떻게 해?
  
  // 해결책: "너 문자열 맞니?" 하고 확인해야 함 (이건 12강에서 배웁니다!)
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // 이제 OK!
  }
}

---

✍️ 6강 미니 퀴즈 & 실습

개념을 잡았으니 확인해 봅시다!

문제 1. (코드 작성) Status라는 타입을 만들고 싶습니다. 이 타입은 오직 문자열 "success" 또는 문자열 "error" 둘 중 하나만 가질 수 있습니다. (유니온 타입 활용)

TypeScript

 

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

문제 2. (결과 예측) 다음 Worker 타입 변수를 만들 때 필요한 속성은 총 몇 개일까요?

TypeScript

 

type Person = { name: string };
type Skill = { coding: boolean };
type Worker = Person & Skill; // 인터섹션!

const kim: Worker = { ... };

1. 1개 (name)
2. 1개 (coding)
3. 2개 (name과 coding 둘 다)

---

✅ 정답 및 해설

• 문제 1 정답:
  • 해설: 문자열 자체를 타입으로 쓰는 것(리터럴 타입)을 유니온(|)으로 묶으면 됩니다. 이게 바로 다음 7강 예습입니다! 😉
• TypeScript

   

  type Status = "success" | "error";
  

• 문제 2 정답: 3번 (2개)
  • 해설: &는 '그리고' 입니다. Person의 속성(name)도 있어야 하고, 그리고 Skill의 속성(coding)도 모두 가지고 있어야 Worker로 인정받습니다.

---

고생하셨습니다! 👏 이제 "이것도 되고 저것도 되는(|)" 유연함과, "이것도 있고 저것도 있는(&)" 강력함을 모두 손에 넣으셨습니다.

방금 퀴즈 1번에서 "success" | "error" 처럼 딱 정해진 값만 받는 방법을 보셨죠? 이걸 전문 용어로 **'리터럴 타입'**이라고 합니다. 실무에서 "이 버튼은 'small', 'medium', 'large' 사이즈만 있어!" 라고 제한할 때 엄청나게 많이 쓰입니다.

다음 7강에서는 이 리터럴 타입과, 비슷한 듯 다른 Enum에 대해 확실하게 정리해 드리겠습니다.