React FC vs SFC vs VFC

프론트엔드

2023. 4. 23. 23:00

TL;DR

React.SFC, React.VFC는 deprecated되었다. React.FC를 사용하자.
만약 children이 있는 타입을 사용해야 한다면 PropsWithChildren<P> 타입을 사용하자.

const Example: React.FC<React.PropsWithChildren<{ message: string }>> = (props) => {
  const { message, children } = props;
  
  // return jsx
}

본문

FC, SFC, VFC는 모두 약어(alias)이다.

React.FC: React.FunctionComponent
React.SFC: React.StatelessFunctionComponent
React.VFC: React.VoidFunctionComponent

React.SFC는 React 16.7에서 deprecated 되었다. 함수형 컴포넌트는 Stateless, Stateful 둘 다 될 수 있는데 반면 SFC라는 이름은 혼동을 주기 때문이다.

React 18 전까지는 FC는 props에 children을 가지는 타입이었다. 반면, React.VFC는 props에 children이 없었다.

하지만 React 18부터 FC는 기본적으로 children을 가지지 않도록 변경되었다.

    /**
     * @deprecated - Equivalent with `React.FC`.
     */
    type VFC<P = {}> = VoidFunctionComponent<P>;

    /**
     * @deprecated - Equivalent with `React.FunctionComponent`.
     */
    interface VoidFunctionComponent<P = {}> {
        (props: P, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

VFC의 선언을 보면 React.FC와 사실상 동일한 타입이기 때문에 deprecated된 것을 볼 수 있다.