순수 자바스크립트는 런타임(브라우저 실행 중)에 에러가 터지기 전까지 문제를 모르는 경우가 많습니다. React에 TypeScript를 결합하면 컴포넌트의 Props나 State가 어떤 형태의 데이터를 받아야 하는지 미리 엄격하게 정의(Type Definition)하여 버그를 사전에 차단할 수 있습니다.
React에서 자주 쓰이는 주요 타입
React.FC: 함수형 컴포넌트 타입 지정 (최근에는 잘 쓰지 않고 매개변수에 직접 지정하는 추세)
React.MouseEvent<HTMLButtonElement>: 버튼 클릭 이벤트 객체 타입
React.ReactNode: children prop으로 들어올 수 있는 모든 렌더링 가능한 노드 타입
💡 이제 TypeScript는 선택이 아닌 필수
최근 실무 환경에서 거의 모든 모던 프론트엔드 프로젝트는 TypeScript로 구축됩니다. 앞서 배운 Zustand, TanStack Query, 그리고 커스텀 훅 설계 시 강력한 자동완성과 타입 추론을 제공하여 개발 생산성을 극대화하고 런타임 에러를 완벽히 예방합니다.
UserProfile.tsx
// TypeScript 환경 (.tsx 파일)
import React, { useState } from 'react';
// 1. Props의 형태를 interface로 명확히 정의합니다.
interface UserCardProps {
name: string;
age: number;
// ?를 붙이면 선택적(Optional) 속성이 됩니다.
email?: string;
isOnline: boolean;
}
// 2. 컴포넌트 매개변수에 타입을 적용합니다.
function UserProfile({ name, age, email, isOnline }: UserCardProps) {
return (
<div style={{ border: '1px solid #ccc', padding: '1rem', borderRadius: '8px' }}>
<h2>
{name} ({age}세)
<span style={{ color: isOnline ? 'green' : 'gray', marginLeft: '8px' }}>
●
</span>
</h2>
{email && <p>이메일: {email}</p>}
</div>
);
}
function App() {
// State에도 제네릭(<>) 문법으로 타입을 명시할 수 있습니다.
const [users, setUsers] = useState<UserCardProps[]>([]);
// 만약 props 타입에 맞지 않는 데이터를 넘기면 VScode 편집기에서 에디터가 빨간 줄로 경고해줍니다!
return (
<div>
<UserProfile name="Minstudio" age={28} isOnline={true} />
</div>
);
}
