React FC vs SFC vs VFC

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/38/

 

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라는 이름은 혼동을 주기 때문이다. (관련 트위터 링크) (관련 PR 링크)

 

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된 것을 볼 수 있다.