[이제와서 시작하는 React 마스터하기 #15] React + TypeScript 맛보기

React Day 15 - 지금까지 React 기초를 다졌어요! 이제부터는 실무에서 자주 사용하는 도구들을 가볍게 맛보는 시간이에요. 오늘은 TypeScript를 소개할게요!

오늘 배울 내용

• ✅ TypeScript가 뭔가요?
• ✅ 왜 사용하나요?
• ✅ 간단한 예제 맛보기
• ✅ 다음 학습 방향

---

시작하기 전에

축하해요! 지금까지 React의 핵심을 모두 배웠어요:

• Day 1-3: React 기초
• Day 4-8: Hooks와 Context API
• Day 9-14: 라우팅, 폼, 최적화, 상태관리

이제부터는 조금 다릅니다!

Day 15~20은 “입문자를 위한 소개” 시간이에요. 실무에서 자주 쓰이는 도구와 개념을 가볍게 맛보고, 관심 가는 주제를 깊게 공부할 수 있도록 방향을 제시해드릴게요.

---

TypeScript가 뭔가요?

TypeScript는 JavaScript에 “타입”을 추가한 언어예요.

일상 비유 🏷️

마트에 가면 식품마다 라벨이 붙어있죠?

🥛 우유 (유제품)
🍎 사과 (과일)
🥖 빵 (곡물)

라벨이 있으면:

• 실수로 우유를 구울 일이 없어요
• 사과를 냉동고에 넣지 않아요
• 빵을 음료수라고 착각하지 않아요

TypeScript는 코드에 이런 “라벨”을 붙여주는 거예요!

---

JavaScript vs TypeScript

JavaScript (타입 없음)

function greet(name) {
  return `안녕하세요, ${name}님!`;
}

greet("홍길동");   // ✅ 안녕하세요, 홍길동님!
greet(123);        // ⚠️ 안녕하세요, 123님! (이상하지만 에러는 안 남)
greet();           // ⚠️ 안녕하세요, undefined님! (에러 안 남)

문제: 잘못된 값을 넣어도 실행되기 전까지는 몰라요!

TypeScript (타입 있음)

function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}

greet("홍길동");   // ✅ 안녕하세요, 홍길동님!
greet(123);        // ❌ 에러! 숫자는 안 돼요
greet();           // ❌ 에러! 값을 꼭 넣어야 해요

장점: 코드를 작성하는 순간 실수를 잡아줘요!

---

왜 TypeScript를 사용하나요?

1. 실수를 미리 잡아줘요

// JavaScript
const user = { name: "홍길동", age: 30 };
console.log(user.naem);  // undefined (오타인데 모름!)

// TypeScript
const user: { name: string; age: number } = { name: "홍길동", age: 30 };
console.log(user.naem);  // ❌ 에러! 'naem'은 없어요. 'name'을 의미하셨나요?

2. 자동완성이 똑똑해져요

TypeScript를 쓰면 VS Code가 무슨 값을 쓸 수 있는지 자동으로 알려줘요:

const user = { name: "홍길동", age: 30 };
user.  // ← 여기서 자동으로 name, age가 나타남!

3. 협업이 쉬워져요

타입이 있으면 함수가 뭘 받고 뭘 돌려주는지 명확해요:

function calculatePrice(price: number, tax: number): number {
  return price + (price * tax);
}

// 다른 팀원이 봐도 바로 이해 가능!
// price와 tax는 숫자, 결과도 숫자를 돌려줌

---

React + TypeScript 간단 예제

예제 1: Props 타입 지정하기

import React from 'react';

// Props의 타입을 정의
interface ButtonProps {
  text: string;
  onClick: () => void;
  disabled?: boolean;  // ?는 선택사항
}

function Button({ text, onClick, disabled = false }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {text}
    </button>
  );
}

function App() {
  const handleClick = () => {
    alert("클릭!");
  };

  return (
    <div>
      <Button text="클릭하세요" onClick={handleClick} />
      <Button text="비활성" onClick={handleClick} disabled={true} />
    </div>
  );
}

export default App;

장점:

• text를 숫자로 넘기면 에러
• onClick을 안 넘기면 에러
• disabled는 선택사항이라 안 넘겨도 OK

예제 2: useState 타입 지정하기

import React, { useState } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile() {
  // user는 User 타입이거나 null
  const [user, setUser] = useState<User | null>(null);

  const handleLogin = () => {
    setUser({
      id: 1,
      name: "홍길동",
      email: "hong@example.com"
    });
  };

  return (
    <div>
      {user ? (
        <div>
          <h2>{user.name}</h2>
          <p>{user.email}</p>
        </div>
      ) : (
        <button onClick={handleLogin}>로그인</button>
      )}
    </div>
  );
}

export default UserProfile;

장점:

• user.name을 user.naem으로 오타 내면 에러
• setUser에 잘못된 형태의 객체를 넣으면 에러

---

TypeScript 시작하는 방법

새 프로젝트 만들 때

# TypeScript 템플릿으로 React 프로젝트 생성
npx create-react-app my-app --template typescript
cd my-app
npm start

이제 .tsx 확장자로 파일을 만들면 TypeScript를 쓸 수 있어요!

파일 확장자

• JavaScript: .js, .jsx
• TypeScript: .ts, .tsx

---

언제 TypeScript를 배워야 하나요?

🟢 지금 당장 배우면 좋은 경우

• 실무 프로젝트를 준비하고 있어요
• 팀 프로젝트를 할 예정이에요
• 대규모 앱을 만들 계획이에요
• 이미 JavaScript에 익숙해요

🟡 나중에 배워도 되는 경우

• React가 아직 헷갈려요
• 개인 공부용 작은 프로젝트만 해요
• JavaScript 기초가 부족해요

결론: TypeScript는 선택사항이에요! React를 먼저 제대로 익히고, 나중에 필요할 때 배워도 괜찮아요.

---

실무에서는 어떻게 쓰나요?

현재 많은 회사에서 TypeScript를 사용해요:

// 실무 예시: API 응답 타입 정의
interface ApiResponse<T> {
  success: boolean;
  data: T;
  message: string;
}

interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

async function fetchProducts(): Promise<ApiResponse<Product[]>> {
  const response = await fetch('/api/products');
  return response.json();
}

장점:

• API가 뭘 돌려주는지 명확해요
• 잘못된 데이터를 처리하려 하면 에러가 나요
• 팀원들이 API 구조를 쉽게 이해해요

---

정리

TypeScript란?

• JavaScript에 “타입”을 추가한 언어
• 코드 작성할 때 실수를 미리 잡아줘요
• 실무에서 많이 사용해요

장점

✅ 실수를 미리 발견 ✅ 똑똑한 자동완성 ✅ 팀 협업에 유리 ✅ 큰 프로젝트에 적합

단점

❌ 배울 게 더 많아요 ❌ 코드가 조금 길어져요 ❌ 작은 프로젝트에는 오버스펙일 수 있어요

---

다음 학습 로드맵

TypeScript를 더 배우고 싶다면?

1단계: 기초 타입 익히기

• 기본 타입 (string, number, boolean, array)
• interface와 type
• Union 타입과 Optional

2단계: React + TypeScript

• Props 타입 지정
• Hooks 타입 (useState, useEffect)
• 이벤트 핸들러 타입

3단계: 실전 프로젝트

• API 응답 타입 정의
• Context API 타이핑
• 커스텀 Hook 타이핑

추천 학습 자료

📚 공식 문서:

• TypeScript 공식 문서
• React TypeScript 가이드

🎥 온라인 강의:

• TypeScript 기초 강좌 검색 (유튜브)
• React + TypeScript 실전 프로젝트

💻 실습 사이트:

• TypeScript Playground
• CodeSandbox에서 React + TypeScript 템플릿 사용

---

다음 포스트 예고

다음 시간에는 Next.js를 가볍게 소개할게요!

Next.js는 React로 더 쉽게 웹사이트를 만들 수 있게 해주는 프레임워크예요. 특히 SEO(검색 최적화)가 필요한 프로젝트에서 많이 사용해요.

“늦었다고 생각할 때가 가장 빠를 때입니다. TypeScript 한번 도전해보세요! 💙”

---

React 완벽 가이드 시리즈

1. React란 무엇인가?
2. 첫 React 앱 만들기
3. useState - 클릭하면 바뀌는 화면
4. Props - 컴포넌트끼리 대화하기
5. useEffect - 컴포넌트 생명주기
6. 조건부/리스트 렌더링
7. Context API - Props 지옥에서 탈출하기
8. Custom Hooks 만들기
9. React Router 완벽 가이드
10. 폼 처리와 유효성 검증
11. React 성능 최적화
12. 에러 바운더리와 Suspense
13. 상태 관리 라이브러리
14. 서버 상태 관리
15. React와 TypeScript 맛보기 ← 현재 글
16. Next.js 맛보기
17. React 테스팅 입문
18. 고급 패턴 소개
19. 실전 프로젝트 아이디어
20. React 배포하기

---

관련 자료

• TypeScript 공식 문서
• React TypeScript Cheatsheet
• TypeScript Deep Dive (한글)