ADR006: React.FC와 React.SFC 피하기
Facebook은 TypeScript 프로젝트의 기본 템플릿에서 React.FC를 제거했습니다.
출처: 문서
본문
맥락
Facebook은 TypeScript 프로젝트의 기본 템플릿에서 React.FC를 제거했습니다. 그 이유는 이 기능이 이점은 거의 없으면서 단점은 몇 가지 있는 불필요한 기능으로 판명되었기 때문입니다.
주요 이유는 다음과 같습니다.
-
children props가 암시적으로 추가되었습니다.
-
제네릭(Type)이 children에서 지원되지 않았습니다.
제거에 대한 자세한 내용은 이 PR에서 확인하세요.
결정
코드베이스를 최신 상태로 유지하기 위해, 새 코드를 추가할 때 코드베이스에서 React.FC와 React.SFC를 피하기로 결정했습니다.
예시는 다음과 같습니다.
/* Avoid this: */type BadProps = { text: string };const BadComponent: FC<BadProps> = ({ text, children }) => ( <div> <div>{text}</div> {children} </div>);/* Do this instead: */type GoodProps = { text: string; children?: React.ReactNode };const GoodComponent = ({ text, children }: GoodProps) => ( <div> <div>{text}</div> {children} </div>);/* Or as a shorthand, if no specific child type is required */type GoodProps = PropsWithChildren<{ text: string }>;const GoodComponent = ({ text, children }: GoodProps) => ( <div> <div>{text}</div> {children} </div>);
결과
코드베이스에서 현재 React.FC와 React.SFC 사용을 점진적으로 제거할 것입니다.