8.1.2_`React.FC`와 `React.VFC` 타입은 어떻게 다르며, 어떤 것이 리액트 v18 이후 권장되는 방식인가요?

[Stilllee]

📝 p251

❓ React.FC와 React.VFC 타입은 어떻게 다르며, 어떤 것이 리액트 v18 이후 권장되는 방식인가요?

React.FC (FunctionComponent)와 React.VFC (VoidFunctionComponent)는 리액트 컴포넌트에서 JSX를 사용할 때 타입을 지정하기 위해 사용됩니다. 이 두 타입은 어떻게 다르며, 리액트 v18 이후 어떤 타입이 권장되는지 설명해주세요.

[eeeyooon]

React.FC와 React.VFC는 함수 컴포넌트의 타입 지정을 위해 제공되는 타입니다. 둘은 children이라는 타입을 허용하느냐에 따라 차이를 보입니다.

React.FC는 children props으로 자동으로 포함하기 때문에 React.FC 타입을 사용하면 해당 컴포넌트는 children props을 명시적으로 정의하지 않아도 자동으로 받을 수 있습니다. 반면 React.VFC는 children prop을 자동으로 포함하지 않습니다. 만약 children을 사용하려면 명시적으로 타입을 정의해야 합니다.

리액트 v18로 넘어오면서 React.VFC가 삭제되고 React.FC에서 children이 사라졌습니다. 리액트 v18 이후부터는 React.VFC 대신 React.FC 또는 props 타입 · 반환 타입을 직접 지정하는 형태로 타이핑할 것이 권장됩니다.

[lulla-by]

React.FC와 React.VFC은 리액트에서함수 컴포넌트의 타입 지정을 위해 제공되는 타입입니다. 둘 사이에는 children이라는 타입을 허용하는지 아닌지에 따라서 차이를 보입니다.

React.FC는 암묵적으로 children을 포함하고 있기 때문에 children을 사용하지 않아도 children props를 허용합니다. 하지만 React.VFC는 children을 포함하지 않기 때문에 해당 props가 필요하지 않은 경우에는 React.VFC를 많이 사용합니다.

하지만 리액트 v18로 넘어오면서 React.VFC가 사라지고 React.FC에서 children이 사라졌기 때문에 React.FC 또는 props 타입 · 반환 타입을 직접 지정해야합니다.

[sryung1225]

React.FC

• @types/react 초기 버전부터 존재
• React에서 함수 컴포넌트의 타입 지정을 위해 제공되는 타입 중 하나

      const Hello: React.FC<HelloProps> = ({ hi }) => {};

• children이라는 타입을 허용
  • 암묵적으로 children을 포함하고 있기 때문에 해당 컴포넌트에서 children을 사용하지 않더라도 children props를 허용
• React v18에서 children 삭제

React.VFC

• @types/react v16.9.4에서 추가
• React에서 함수 컴포넌트의 타입 지정을 위해 제공되는 타입 중 하나

  const Hello: React.VFC<HelloProps> = ({ hi }) => {};

• children이라는 타입을 허용하지 않음
  • 때문에 children props가 필요하지 않은 컴포넌트에서 더 정확한 타입을 지정하기 위해 React.FC 보다는 React.VFC 를 선호
• React v18에서 삭제 ⇒ 미사용

[Stilllee]

React.FC는 자동으로 children prop을 포함하지만, React.VFC는 children을 자동으로 포함하지 않았습니다.

리액트 v18 이후 React.VFC는 삭제되었으며, React.FC가 children prop을 자동으로 포함하지 않는 방식으로 변경되었습니다. 따라서 현재는 React.FC 사용이 권장됩니다.