[TypeScript] React.FC에 사용에 대해 생각해보기

FC란?

Function Component 타입의 줄임말로, React + Typescript 조합으로 개발할 때 사용하는 타입입니다.
함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입입니다.

React.FC 사용

타입스크립트를 이용해서 리액트로 작업을 하다보면 아래의 형태로 작업을 하는 경우가 많습니다.

import React from 'react';
type GreetingsProps = {
  name: string;
};
const Greetings: React.FC<GreetingsProps> = ({ name }) => (
  <div>Hello, {name}</div>
);
export default Greetings;

React.FC를 사용하는 경우에는 다음과 같이 props의 타입을 Generics으로 넣어서 사용합니다.
하지만 이렇게 React.FC로 타입을 지정하는 것을 지양하라는 개발자들도 있어서 그 이유를 알아보겠습니다.

React.FC 사용을 지양해야 하는 이유?

지금은 좀 지난 문서이긴 하지만 CRA에서는 기본 템플릿에 FC를 빼야한다는 PR이 올라왔었고, 실제 반영되었습니다.
아래에 작성 내용들은 위 PR에서 주장한 내용들과 검색을 통한 자료들을 참고하여 작성하였습니다.

1. children

React.FC를 사용을 하면 props 에 기본적으로 children이 들어가있다는 것 입니다.

// React.FC 사용
export const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello {name}</h1>
}

const App = () => (
  <>
    <Greeting name="Stefan">
      <span>{"I can set this element but it doesn't do anything"}</span> // children 전달
    </Greeting>
  </>
)

이점을 장점이라고 생각할 수도 있는 부분이지만, 하지만 타입스크립트를 쓰는 이유중 하나가 정확한 타입을 지정을 해주면서 자바스크립트 코드의 안전성을 향상 시키는 부분인데 FC를 사용하면 컴포넌트에 children이 있을 수 있다는 것을 가정하여 언제든지 children의 타입 지정 없이 전달이 가능하기 때문에 타입이 명확하지 않다는 단점이 있습니다.

2. defaultProps

defaultProps는 props에 기본값을 세팅할 수 있도록 도와주는데, React.FC를 사용할 시에는 defaultProps 인식에 대한 이슈가 있었습니다.

type GreetingsProps = {
  name: string;
  mark: string;
};

const Greetings: React.FC<GreetingsProps> = ({ name, mark }) => (
  <div>
    Hello, {name} {mark}
  </div>
);

Greetings.defaultProps = {
  mark: '!' // 유효하지 않음.
};

export default Greetings;

※참고
타입스크립트에서 defaultProps 사용이 개선이 되면서 최근에 테스트 해 본 결과는 사용이 가능했습니다.
따라서 이 부분은 조금 더 자료를 찾아보고 추후 업데이트 하겠습니다.
기존 React.FC defaultProps문제에 대한 토론 링크
https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30695
https://github.com/typescript-cheatsheets/react/issues/87

3. 코드 길이가 더 길다...

중요한 부분까지는 아니지만 다음과 같이 React.FC를 사용하면 코드가 더 길다는 이유도 있습니다.

const C1: React.FC<CProps> = (props) => { }
const C2 = (props: CProps) => {};

결론

React.FC를 쓰는 것이 꼭 나쁜 것 만은 아니라고 생각은 합니다. 향후 개선이 될 수도 있고 여전히 이 부분을 사용하는게 좋은 경우도 있을 것입니다.
하지만 필자의 생각은 React.FC를 사용하지 않고 props 타입을 직접 지정해 주는 것이 더욱 타입스크립트 같고, 다양한 경우에서 안전하다고 생각합니다.

참고

2. 리액트 컴포넌트 타입스크립트로 작성하기
React.FC를 사용하지 않는 이유
10++ TypeScript Pro tips/patterns with (or without) React
React.FC 사용 지양하기
리액트에서 FC를 사용하지 말아야 하는 이유