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

네, 좋습니다! 속도가 아주 좋네요. 🚅 바로 3강으로 들어가 봅시다.

이번 시간에는 프로그래밍의 꽃, **'함수(Function)'**를 다뤄볼 겁니다. React나 Next.js를 하다 보면 컴포넌트도 결국 함수고, 이벤트 처리하는 것도 함수고... 온통 함수 세상이죠? 여기서 타입을 딱 잡아두면 에러가 획기적으로 줄어듭니다.

---

🚀 제3강. 함수에도 타입을 입혀보자: "입구와 출구를 지켜라!"

함수는 **'자판기'**와 같습니다.

1. 입구 (Parameter, 매개변수): 동전을 넣는 곳
2. 내부 로직: 윙~ 하고 돌아가는 기계 장치
3. 출구 (Return, 반환값): 음료수가 나오는 곳

타입스크립트는 이 자판기의 입구와 출구에 경비원을 세우는 것입니다. "이 입구엔 500원짜리만 들어와!", "이 출구에선 콜라만 나와야 해!"라고 말이죠.

1. 함수의 기본 문법 (입구와 출구 정의하기)

자바스크립트 함수에 딱 두 군데만 신경 쓰면 됩니다. () 안쪽과 () 바깥쪽입니다.

TypeScript

 

// (a: number, b: number)  <-- 입구(매개변수): 숫자만 들어와!
// : number                <-- 출구(반환값): 나갈 땐 무조건 숫자여야 해!
function add(a: number, b: number): number {
  return a + b;
}

이걸 요즘 React에서 많이 쓰는 **화살표 함수(Arrow Function)**로 바꾸면 이렇게 됩니다.

TypeScript

 

const add = (a: number, b: number): number => {
  return a + b;
};

• 꿀팁: 사실 '출구(반환값)' 타입은 안 적어도 타입스크립트가 알아서 추측(추론)해 줍니다. a랑 b가 숫자면 더한 값도 당연히 숫자겠지? 하고요. 하지만, 명확하게 적어주는 습관이 실수를 줄여줍니다.

2. 실무 꿀팁: "있을 수도, 없을 수도?" (선택적 매개변수 ?)

실무를 하다 보면 어떤 값은 꼭 필요하지만, 어떤 값은 없어도 될 때가 있습니다. 예를 들어, 회원가입할 때 '이름'은 필수지만 '별명'은 선택사항일 수 있죠.

이때 변수명 뒤에 물음표(?) 만 붙이면 됩니다.

TypeScript

 

// nickname 뒤에 ?가 붙었죠? "문자열이거나, 아니면 아예 없거나(undefined)"라는 뜻입니다.
function printProfile(name: string, nickname?: string) {
  console.log(`이름: ${name}`);
  
  if (nickname) {
    console.log(`별명: ${nickname}`);
  } else {
    console.log("별명 없음");
  }
}

printProfile("김코딩");             // OK! (별명 안 넣어도 됨)
printProfile("이철수", "스파이더맨"); // OK! (별명 넣어도 됨)

⚠️ 주의: 선택적 매개변수(?)는 무조건 필수 매개변수 뒤에 와야 합니다. (nickname?: string, name: string) 순서로 쓰면 에러가 납니다. (중요한 게 먼저 와야 하니까요!)

3. React에서의 활용 (맛보기)

나중에 자세히 배우겠지만, React 컴포넌트도 함수죠? "이 컴포넌트는 name이라는 문자열을 받아서 HTML(JSX)을 뱉어내는 함수야!"라고 정의하는 식입니다.

TypeScript

 

// 간단한 예시 (나중에 더 자세히 배웁니다)
const WelcomeMessage = (name: string): string => {
  return `환영합니다, ${name}님!`;
};

---

✍️ 3강 미니 퀴즈 & 실습

개념을 잡았으니 문제를 풀어봅시다!

문제 1. (코드 완성) 두 개의 숫자 price(가격)와 count(개수)를 받아서, 총금액(숫자)을 반환하는 함수 calculateTotal을 만들려고 합니다. 빈칸 (A)와 (B)에 들어갈 코드는?

TypeScript

 

function calculateTotal(price: number, count: number): (A) {
  return price * count;
}

1. (A): string
2. (A): number
3. (A): void

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

TypeScript

 

function greet(name?: string, age: number) {
  console.log(name, age);
}

1. name은 문자열인데 숫자를 넣어서
2. age에 타입을 지정하지 않아서
3. 선택적 매개변수(?)가 필수 매개변수보다 앞에 와서

---

✅ 정답 및 해설

• 문제 1 정답: 2번 (number)
  • 해설: 숫자끼리 곱하면 결과도 당연히 숫자(number)가 나와야겠죠? string은 문자열, void는 리턴값이 없을 때 씁니다.
• 문제 2 정답: 3번
  • 해설: 아까 배운 꿀팁 기억나시죠? 물음표(?) 붙은 녀석은 항상 맨 뒤로 가야 합니다. function greet(age: number, name?: string) 순서로 바꿔야 에러가 사라집니다.

---

수고하셨습니다! 👍 이제 함수에 데이터가 들어오고 나가는 길목을 완벽하게 통제할 수 있게 되었습니다.

그런데 지금까지는 숫자, 문자 같은 간단한 것만 다뤘죠? 실무에서는 { name: "철수", age: 30, skills: ["React"] } 처럼 복잡한 '객체(Object)' 데이터를 훨씬 많이 다룹니다.

이런 객체의 모양을 정의하는 **'설계도'**를 만드는 방법, 바로 **4강 '인터페이스(Interface)'**에서 배울 차례입니다. 타입스크립트의 꽃이라고 할 수 있죠!