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

🔥 1강을 완벽하게 소화하셨으니, 바로 2강으로 넘어가 보겠습니다.

이번 시간에는 타입스크립트의 가장 기초가 되는 **'기본 타입(Basic Types)'**들을 뽀개보겠습니다. React에서 state를 만들거나 데이터를 다룰 때 숨 쉬듯이 쓰게 될 내용들이니 편안하게 따라오세요!

---

🚀 제2강. 기본 타입 뽀개기: "상자에 라벨 붙이기"

타입스크립트를 쓴다는 건, 데이터를 담는 상자(변수)에 내용물 라벨(타입)을 붙이는 작업과 같습니다.

💡 비유: 이사를 간다고 상상해 보세요.

• 자바스크립트: 상자에 아무거나 막 담습니다. 나중에 열어보니 책 사이에 샴푸가 터져 있습니다. 😱
• 타입스크립트: 상자 겉에 "책", "주방용품" 이라고 매직으로 크게 씁니다. "책" 상자에는 책만 넣어야 합니다. 다른 걸 넣으면 혼나죠!

1. 가장 많이 쓰는 '3대장' (Primitive Types)

자바스크립트에서 가장 흔하게 보는 문자, 숫자, 그리고 참/거짓입니다.

TypeScript

 

// 1. 문자열 (String): 텍스트는 모두 string입니다.
let myName: string = "타입쌤";
// myName = 123; // 🚨 에러! (숫자는 안 돼요)

// 2. 숫자 (Number): 정수, 소수점 상관없이 모두 number입니다.
let age: number = 30;
let height: number = 175.5;

// 3. 논리 (Boolean): 참(true) 아니면 거짓(false)입니다.
// React에서 '로딩 중인가?', '모달이 열렸나?' 체크할 때 정말 많이 씁니다.
let isLoading: boolean = true;

2. 줄줄이 사탕 '배열' (Array)

데이터가 여러 개 묶여 있는 리스트입니다. React에서 게시글 목록, 댓글 목록 등을 다룰 때 필수입니다.

TypeScript

 

// 숫자만 들어갈 수 있는 배열
let scores: number[] = [100, 90, 85];

// 문자만 들어갈 수 있는 배열
let todoList: string[] = ["코딩하기", "밥 먹기", "잠자기"];

// 🚨 실수 방지
// todoList.push(10); // 에러! 문자열 배열에 숫자를 넣을 수 없습니다.

• 팁: 타입[] 형태를 기억하세요! (예: number[], string[])

3. 조금 특별한 녀석들: void와 any

이 두 가지는 개념을 잘 잡아두셔야 합니다.

① void: "주긴 주는데, 되돌려 받진 않아" 함수가 일을 하고 나서 아무런 값도 리턴(return)하지 않을 때 씁니다. 보통 화면에 console.log만 찍거나, React에서 setState 같이 상태만 바꾸고 끝나는 함수들에 쓰입니다.

TypeScript

 

function printHello(): void {
  console.log("안녕하세요!");
  // return이 없죠? 이럴 때 void를 씁니다.
}

② any: "마법의 프리패스" (주의! ⚠️) any는 "아무거나 다 됨" 이라는 뜻입니다. 이걸 쓰면 타입 검사를 아예 안 합니다. 자바스크립트랑 똑같아지는 거죠.

TypeScript

 

let secretBox: any = "문자도 되고";
secretBox = 123;   // 숫자도 되고
secretBox = true;  // 불리언도 됨 (에러 안 남)

• 선생님의 조언: any는 정말 타입을 도저히 알 수 없을 때만 '비상탈출 버튼'처럼 쓰세요. 남발하면 타입스크립트를 쓰는 의미가 사라집니다!

---

✍️ 2강 미니 퀴즈 & 실습

개념이 머릿속에 들어왔는지 확인해 볼까요?

문제 1. (실무 적용) React 컴포넌트 안에서, "로그인 상태"를 나타내는 변수 isLoggedIn을 만들고 싶습니다. 초기값은 false입니다. 올바르게 선언한 것은?

1. let isLoggedIn: string = false;
2. let isLoggedIn: number = false;
3. let isLoggedIn: boolean = false;

문제 2. (에러 찾기) 다음 중 타입스크립트가 빨간 줄(에러)을 긋는 줄은 어디일까요?

TypeScript

 

let prices: number[] = [1000, 2000, 3000];

prices.push(4000);   // A
prices.push("5000"); // B

---

✅ 정답 및 해설

• 문제 1 정답: 3번
  • 해설: 로그인 상태는 '로그인 됨(true)' 또는 '안 됨(false)' 두 가지 상태이므로 논리형인 boolean이 적합합니다. 1번은 문자열(string)이라고 해놓고 false를 넣어서 틀렸습니다.
• 문제 2 정답: B
  • 해설: prices는 number[] 즉, 숫자들의 배열입니다. A처럼 숫자 4000을 넣는 건 괜찮지만, B처럼 따옴표로 감싼 문자열 "5000"을 넣으려 하면 "여기엔 숫자만 들어올 수 있어!"라며 에러가 발생합니다.

---

고생하셨습니다! 👏👏 이제 변수에 라벨(타입)을 붙이는 법을 알게 되셨습니다. 아주 기본적인 내용 같지만, 모든 복잡한 코드도 결국 이 기본 타입들이 모여서 만들어집니다.

다음 3강에서는 이 타입들을 가지고 '함수(Function)'를 좀 더 안전하게 만드는 방법을 배워보겠습니다. 매개변수와 반환값에 타입을 어떻게 붙이는지 알면 코드가 훨씬 튼튼해집니다.