React.FC와 React.VFC의 차이점

[devsomda]

📚 251p - 252p 📌 React.FC와 React.VFC의 차이점에 대해 작성해 주세요. (optional. React 18버전 이후 달라진 점에 대해서도 설명해 주세요)

[hotdog1004]

• 리액트18버전 이전 기준으로 함수 표현식을 사용해서 함수 컴포넌트를 선언할 때 타입으로 React.FC와 React.VFC을 지정해서 사용했습니다.
• 두 타입은 Children Props 허용 여부에 대한 차이를 가집니다.
  먼저 React.FC 타입의 경우 암묵적으로 children을 포함하고 있기 때문에 해당 컴포넌트에서 children을 사용하지 않더라도 children props를 허용합니다. 반면 React.VFC 타입은 children props를 허용하지 않습니다.
• 리액트 18 버전 이후 React.VFC 타입이 삭제 되었고, React.FC 타입에서 children이 삭제되었습니다. 때문에 18 버전 이후에는 React.FC 또는 props 타입, 반환 타입을 직접 지정하는 형태로 타이핑을 해주어야합니다.

[kwonhygge]

React.FC에서 FC는 function component의 약자입니다. 즉, React.FC는 리액트의 함수 컴포넌트를 말합니다. VFC와의 차이를 알기 위해서는 먼저 React.FC의 props에 children이 포함된다는 것을 알아야하는데요.

React.VFC에서 VFC는 void function component의 약자입니다. 존재하지 않음이라는 의미의 void가 붙었고 이는 children prop이 포함되어있지 않음을 의미합니다.

즉, React.FC와 React.VFC는 children을 허용하는 컴포넌트인지 아닌지를 구분하기 위해 존재합니다.

하지만 React 18버전으로 넘어오며 React.VFC가 삭제되었고 React.FC에서 children prop이 사라졌습니다. 그래서 이제는 React.VFC 대신 React.FC 또는 props 타입, 반환 타입을 직접 지정하는 형태로 타이핑해줘야 합니다.

[samseburn]

리액트 v18 이전

React.FC가 등장하고 이후 @types/react v16.9.4에서 React.VFC 타입이 추가되었습니다. React.FC와 React.VFC 모두 함수 컴포넌트 지정 시 사용하며, children 타입 허용 여부에 따라 쓰임새가 달라집니다.

• React.FC: children을 사용하지 않더라도 암묵적으로 children을 허용하는 컴포넌트
• React.VFC: children props이 포함되어 있지 않은 컴포넌트

  type FC<P = {}> = FunctionComponent<P & { children: ReactNode }>
  type VFC<P = {}> = FunctionComponent<P>  // children 미포함

  리액트 v18 이후

  v18 이후 함수 컴포넌트 정의 타입 중 아래와 같은 변경점이 발생했습니다.

  • React.VFC가 삭제
  • React.FC에서 암시적 children 제거

따라서 아래의 두 가지 방식을 고려하여 함수 컴포넌트를 정의합니다.

• React.VFC 대신 React.FC 사용

  const Component: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => {
  return (
  <section>
    <h1>{title}</h1>
    <div>{children}</div>
  </section>
  )
  }

• props 타입 및 반환 타입을 직접 지정

  interface ComponentProps {
  title: string
  children: React.ReactNode
  }
  const Component = ({ title, children }: ComponentProps) => {
  return (
  <section>
    <h1>{title}</h1>
    <div>{children}</div>
  </section>
  )
  }

[devsomda]

React.FC: 암묵적으로 children을 포함한다. React.VFC: children을 포함하지 않기 때문에, children component가 없는 경우 명확히 하기 위해 사용한다.

단, React18 이후 VFC가 삭제되고 FC가 children을 암묵적으로 포함하지 않는다. 따라서 자식이 있는 경우 타입을 지정해 사용한다.

[limejin]

	React.FC	React.VFC
뚯	FuntionComponent	Void FuntionComponent
children props 허용 여부	O (children 포함)	X
v18	children 자동 포함 X ⇒ 명시적으로 정의	삭제

v18 변화 이유 ⇒ 코드 단순화와 유지 보수성

• FC와 VFC가 매우 유사한 기능을 하기에 둘을 구분해서 사용하는 것이 복잡함을 유발
  • VFC는 children이 기본 포함되지 않는 경우를 위해 사용되었지만, 실제로 대부분 컴포넌트에서 children을 사용하여 FC와의 구분이 모호해짐 ⇒ FC 하나로 통일하여 더 직관적인 타입 시스템 제공