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를 사용해서 얻을 수 있는 이점은 두 가지가 있다.

장점

1. props 에 기본적으로 children 이 들어가있다는 것이다.
   

2. 컴포넌트의 defaultProps, propTypes, contextTypes 를 설정 할 때 자동완성이 될 수 있다는 것이다.

   

children이 옵션 형태로 들어있다보니 Props의 타입이 명백하지가 않다.
children이 있어야 하는 경우도 있고, 없어야 하는 경우도 있습니다. 그럼에도 Props 타입 안에 children을 명시해야한다.

type GreetingsProps = {
  name: string;
  children: React.ReactNode;
};

그래서 children은 장점이자 단점이 될 수 있다. React.FC을 사용하기보다는 Props 타입 정의를 통해 children이 있다 없다를 명백하게 명시하는게 더 좋은 방법이 될 수 있다.

단점

1. React.FC를 사용하는 경우 defaultProps가 제대로 작동하지 않는다.

import React from 'react';

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

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

Greetings.defaultProps = {
  mark: '!'
};

export default Greetings;

import React from 'react';
import Greetings from './Greetings';

const App: React.FC = () => {
  return <Greetings name="Hello" />;
};

export default App;

위 예제와 같이 mark를 defaultProps로 넣었음에도 불구하고 mark 값이 없다면서 제대로 작동하지 않는다. 이때, React.FC를 생략하면 정상 작동한다.

결론

1. props 에 기본적으로 children 이 들어가있다.
2. 컴포넌트의 defaultProps, propTypes, contextTypes 를 설정 할 때 자동완성이 될 수 있다.
3. React.FC를 사용하는 경우 defaultProps가 제대로 작동하지 않을 수도 있다.

React.FC에 대한 참고 자료 : https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/

출처:
https://react.vlpt.us/using-typescript/02-ts-react-basic.html