React.FC에 관하여 [React 18, TypeScript5.2 기준]

bible_k_·2023년 9월 26일

React React.FC TypeScript5.2 react 18 typescript

새로운 프로젝트의 시작 단계에 있는데, 함수형 컴포넌트 타입 선언 컨벤션을 정하다가 React.FC에 대해 많은 이야기가 오갔다.

일단 논점은 React.FC 의 일부 특징 때문에 사용을 지양해야한다는 것이었다.
그래서 React와 TypeScript 최신 버전을 기준으로 React.FC를 사용하는 것이 적절한지 찾아보니
React.FC를 사용하면 안되는 이유로 여겨졌던 부분들이 일부 해결되어있었다.

1. children은 더 이상 props 타입에 암묵적으로 포함되지 않으며 명시적으로 선언해야 한다.

React.FC 사용을 지양해야한다는 대표적인 이유였던, 또 누군가는 유용하게 사용한 기능이었던 암묵적인 children 선언이 제거되었다.

암묵적으로 children을 선언한다는 것은 children이 필요 유무를와 의도를 파악할 수 없다는 문제를 가지고 있었다. 이로 인해 자식 노드에 대한 타입 체킹도 적절하게 이루어질 수 없었다.

이제 더 이상 React.FC 타입에 암묵적인 children 선언은 제거 되며 명시적으로 선언을 해주면 된다.

Before

const Component: React.FC = () => {
  return <div />;
};
// No error
<Component>123</Component>;

After

<Component>123</Component>;
// error
// Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.

2. React.FC를 사용할 때 컴포넌트가 React.ReactNode를 반환하도록 변경되었다.

React 18 이전 버전에서는 React.FC를 사용할 때 컴포넌트가 React.ReactElement를 반환하여, 컴포넌트에서 숫자나 문자열과 같은 다른 유형의 값을 반환하면 TypeScript에서 오류를 발생시키는 문제가 있었다.

하지만 TypeScript 5.1 버전과 React의 최신 타입 버전에서는 React.FC를 사용할 때 컴포넌트가 React.ReactNode를 반환하도록 변경되었다. 이로 인해 컴포넌트가 반환하는 값과 관련된 타입 오류가 사라졌다.

Before

const Component = (): React.ReactElement => {
  return 123;
// error
// Type 'number' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
};

After

// No error
const Component: React.FC = () => {
  return 123;
};

요약

이전에는 React 컴포넌트에서 children 속성이 암묵적으로 포함되어 있었지만, 이제는 children이 props 타입에 암묵적으로 포함되지 않으며 명시적으로 선언해야 한다.

이제는 컴포넌트에서 undefined, 문자열 또는 숫자를 반환해도 오류가 발생하지 않는다. 이전에는 React 컴포넌트에서 이러한 값들을 반환하면 오류가 발생했지만, React 18에서는 정상적으로 처리된다.