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

bible_k_·2023년 9월 26일
0

새로운 프로젝트의 시작 단계에 있는데, 함수형 컴포넌트 타입 선언 컨벤션을 정하다가 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에서는 정상적으로 처리된다.

결론

판단은 본인의 몫
앞으로 React.FC를 쓸지 말지에 대해서는 컴포넌트 특성과 가독성 측면을 고려하여 결정하고, 일관되게 사용하는 게 중요할 듯하다.

Reference

https://www.totaltypescript.com/you-can-stop-hating-react-fc
https://blog.logrocket.com/upgrading-react-18-typescript/

profile
후론트엔드 개발자

0개의 댓글