React.Fc란

광천·2023년 3월 21일

React.Fc란

FunctionComponent 타입의 줄임말
함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입

import React from 'react';

type GreetingsProps = {
  name: string;
};

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

export default Greetings;

장점

  1. props 에 기본적으로 children 이 들어가있다는 것이다.(리액트 18부터 React.FC 타입에 암묵적인 children 선언 제거)
  2. 컴포넌트의 defaultProps, propTypes, contextTypes 를 설정 할 때 자동완성이 될 수 있다는 것이다.

단점

  1. 타입스크립트의 제네릭 문법을 지원하지 않는다.
  2. defaultProps 속성이 적용되지 않는다. defaultProps을 사용하여 props의 초기값을 설정해도 값을 인식하지 못한다.

리액트 18부터 React.FC 타입에 암묵적인 children 선언 제거가 됨. 이러면 쓸 이유가 있나?

출처

https://velog.io/@yena1025/FunctionComponent-FC-%EC%82%AC%EC%9A%A9-%EC%A4%84%EC%9D%B4%EA%B8%B0-24jhm0wp
https://velog.io/@gabdol/React.FC-%EC%9D%98-%EC%9E%A5%EB%8B%A8%EC%A0%90
https://blog.shiren.dev/2022-04-28/

0개의 댓글