---

📦 TypeScript로 Props 타입 정의하는 3가지 방법 비교

---

React에서 컴포넌트를 만들다 보면 Props의 타입을 어떻게 정의할지 고민할 때가 많다.
interface, type, React.FC 이렇게 3가지가 대표적인 방법인데,
각각의 특징과 언제 어떤 걸 쓰는 게 좋은지 정리해봤다.

---

✅ 1. interface 사용

interface ButtonProps {
  label: string;
  onClick: () => void;
}

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

특징

• 명시적이고 확장이 쉬움 (extends)
• 타입 병합(declaration merging)이 가능
• 코드 컨벤션으로 가장 많이 쓰임

---

✅ 2. type 사용

type ButtonProps = {
  label: string;
  onClick: () => void;
};

특징

• 유니온, 인터섹션 타입과 조합이 유연함
• 튜플, 조건부 타입 등 복잡한 구조에 강함
• interface보다 조금 더 자유롭고 강력한 느낌

---

✅ 3. React.FC 사용

interface ButtonProps {
  label: string;
}

const Button: React.FC<ButtonProps> = ({ label }) => {
  return <button>{label}</button>;
};

특징

• children이 자동 포함됨
• 기본적으로 props에 ReactNode가 포함돼 있음

주의점

• children이 필수가 아닌데 자동으로 포함돼서 버그 원인이 되기도 함
• 최근에는 오히려 명시적인 interface/type을 선호하는 흐름

---

✅ 비교 정리

기준	interface	type	React.FC
확장성	✅ 좋음	🔄 유니온/조합 강함	❌ 복잡한 타입은 불편함
children 자동 포함	❌ 없음	❌ 없음	✅ 자동 포함됨
가독성/명시성	✅ 명확함	✅ 자유로움	❌ 암묵적으로 동작함
요즘 추세	✅ 가장 많이 사용	✅ 상황 따라 사용	⛔ 지양하는 추세

---

✅ 내가 쓰는 기준

• interface는 거의 기본값처럼 사용 (특히 props 정의 시)
• type은 유니온 타입이나, 내부적으로 조합이 많을 때
• React.FC는 쓰지 않음 (children은 명시적으로 받고 싶음)

---

📝 내가 느낀 점

처음엔 React.FC를 많이 봐서 자연스럽게 썼었는데,
지금은 오히려 명시적으로 props를 설계하는 게 협업에서도 훨씬 낫다는 걸 느끼고 있다.
특히 타입스크립트를 쓸수록 코드를 더 명확하게 작성하고 싶어지더라.

---

✍️ "타입을 정의하는 건 단순한 문법이 아니라, 협업의 약속이다."