왜 React.FC를 사용하지 않는가

개요

요새 코드를 보면(특히 GPT가 만든)

const DooComponent: React.FC<DooTypeProps> = ({...}) => {...}

이런식으로 React.FC를 쓰는 경우가 많다.

그러나 React.FC는

React.FC의 사용을 줄이는 주요 이유는 다음과 같습니다:

1. children prop의 암시적 포함: React.FC는 자동으로 children prop을 포함시킵니다. 이는 컴포넌트가 실제로 children을 사용하지 않을 때도 타입 시스템에서 children을 허용하게 만들어 의도치 않은 사용을 초래할 수 있습니다.
2. 제네릭 사용의 제한: React.FC를 사용하면 컴포넌트에 제네릭을 적용하기 어려워집니다. 이는 재사용 가능한 컴포넌트를 만들 때 제약이 될 수 있습니다.
3. defaultProps와의 호환성 문제: React.FC는 defaultProps와 완벽하게 호환되지 않습니다. 이로 인해 prop의 기본값 처리에 혼란이 생길 수 있습니다.
4. 불필요한 복잡성: 많은 경우 React.FC는 불필요한 추상화 계층을 추가합니다. 단순히 함수의 파라미터와 반환 타입을 명시하는 것으로 충분한 경우가 많습니다.
5. 명시성 부족: React.FC를 사용하면 컴포넌트의 반환 타입이 암시적으로 정의됩니다. 이는 때때로 원하는 것보다 덜 구체적일 수 있습니다.
6. 타입 추론의 개선: 최신 TypeScript 버전에서는 함수 컴포넌트의 타입 추론이 크게 개선되어, React.FC 없이도 정확한 타입 체크가 가능해졌습니다.

이러한 이유로 많은 개발자들이 React.FC 대신 더 명시적이고 유연한 타입 정의 방식을 선호하게 되었습니다. 그러나 이는 절대적인 규칙은 아니며, 프로젝트나 팀의 선호도에 따라 React.FC를 계속 사용할 수도 있습니다.