📘 React.FC란 무엇인가? – TypeScript에서의 사용과 장단점 정리

React와 TypeScript를 함께 사용할 때, 흔히 보게 되는 타입이 하나 있다. 바로 React.FC 또는 React.FunctionComponent이다.
이 글에서는 React.FC가 무엇인지, 어떤 역할을 하는지, 실제 현업에서는 어떤 방식을 선호하는지, 그리고 구체적인 예시를 통해 정리해보자.

---

✅ 1. React.FC란?

React.FC는 Function Component의 타입 정의를 도와주는 제네릭(Generic) 타입이다.
즉, 컴포넌트가 어떤 props를 받을지 명시할 수 있도록 도와주는 타입 도우미라고 이해하면 된다.

type Props = {
  name: string;
};

const Hello: React.FC<Props> = ({ name }) => {
  return <div>Hello, {name}</div>;
};

위 코드에서 Hello 컴포넌트는 name이라는 문자열 props를 받으며, React.FC<Props>를 통해 이 타입을 명시하고 있다.

---

🧠 2. TypeScript에서 React.FC가 하는 일

• Function Component로 정의
  - 컴포넌트가 함수형이라는 것을 타입으로 명확하게 알려줌
• children을 자동 포함
  - props.children이 자동으로 타입에 포함되어 따로 명시하지 않아도 사용 가능
• 반환값을 ReactElement로 고정
  - 컴포넌트가 JSX 또는 ReactNode를 반환하는 것을 타입으로 보장함
  

---

⚖️ 3. React.FC의 장단점

✅ 장점

장점	설명
🔹 children 자동 포함	컴포넌트 내부에서 props.children을 바로 사용할 수 있음
🔹 명시적인 반환 타입	ReactElement를 반환하는 걸 보장해줌
🔹 초기 학습자에게 직관적	한눈에 "이건 함수형 컴포넌트야"라는 걸 알 수 있음

❌ 단점

단점	설명
🔸 children 자동 포함으로 인한 오류	사용하지 않는 컴포넌트에도 children이 허용됨 (실수 가능)
🔸 제너릭 사용 제약	<T> 등의 제너릭을 적용하기가 번거로움
🔸 함수의 반환값 타입을 중복 명시	TypeScript가 추론 가능한 값을 굳이 명시할 필요 없음

---

🆚 4. React.FC vs 명시적 Props 타입

✅ React.FC 방식

type Props = {
  name: string;
};

const MyComponent: React.FC<Props> = (props) => {
  return <div>{props.name}</div>;
};

✅ 명시적 타입 방식 (권장되는 추세)

type Props = {
  name: string;
};

const MyComponent = ({ name }: Props) => {
  return <div>{name}</div>;
};

---

🔍 5. 어느 방식이 더 좋은가?

기준	React.FC	직접 타입 명시
children 자동 포함	✅ O	❌ 명시 필요
타입 추론 유연성	❌ 제한 있음	✅ 자유로움
코드 길이	❌ 길어짐	✅ 간결함
최신 추세	❌ 지양	✅ 선호됨

💡 대부분의 기업, 라이브러리, 공식 문서에서는 React.FC 사용을 지양하는 추세다.
특히 children 자동 포함으로 발생할 수 있는 불필요한 오류 방지와 타입 추론 유연성 확보가 큰 이유다.

---

⏰ 언제 React.FC를 써도 괜찮을까?

상황	React.FC 사용 여부
간단한 프로토타입 개발	✅ 괜찮음
children 포함한 컴포넌트 작성 시	✅ 명시 없이 사용 가능
제너릭 사용이 필요한 상황	❌ 지양
규모 있는 팀 프로젝트	❌ 가급적 명시적 방식 사용 권장

---

✅ 결론

• React.FC는 타입스크립트에서 함수형 컴포넌트를 쉽게 선언할 수 있도록 도와주는 제네릭 타입이다.

• 하지만 children 자동 포함과 제네릭 제약 때문에 요즘은 직접 Props를 명시하는 방식을 선호한다.

• 상황에 따라 적절히 선택하되, 팀 내 코드 스타일 가이드에 맞춰 통일하는 것이 중요하다.

---

📝 한 줄 요약

React.FC는 편리하지만, 더 명시적이고 유연한 직접 Props 타입 선언 방식이 현재 TypeScript + React 개발에서 더 많이 사용된다.