TS,React - React.FC type

React.FC(Functional Component)

• 리액트 패키지에 정의된 타입
• React.FC 자체로 Generic Type으로 분류된다.

사용하는 이유

• 함수를 정의한 뒤, ts에게 해당 함수를 내부적으로 어떻게 처리해야 하는지 알려주기 위해 사용한다.

  • children props 같은 기본적인 props는 기본적으로 포함되는데 optional type으로 되어 있기 때문에, 이는 코드의 의도가 명시적이지 않다는 단점으로 작용할 수 있다고 한다.

• 함수형 컴포넌트마다 props에 대한 정의가 다르기 떄문에 FC타입은 제네릭으로 분류할 수 있고 props 객체를 넣을 수 있다.(아래 코드 예시 참고)

• React.FC <>를 이용해 FC 타입 내부의 기능을 밖으로 꺼냈음.

  • FC타입의 기능은 <>에 어떤 객체 타입을 정의하든 객체의 기본 타입, children 프로퍼티와 합쳐주는 기능임.

사용 예시

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

class Todo {
  id: string;
  text: string;
  constructor(todoText: string) {
    this.text = todoText;
    this.id = new Date().toISOString();
  }
}

// React FC 타입은 자체로 이미 제네릭 타입이기 때문에,
// 내부적으로 사용되는 React.FC에 의해 정의된 제네릭 타입에 구체적인 값을 집어넣음
// 아래에서는 {items: Todo[]}이 해당 
const Todos: React.FC<{items: Todo[]}> = (props) => {
  return (
    <ul>
      {props.items.map((e) => (
        <TodosItem text={e.text} key={e.id} />
      ))}
    </ul>
  );
};
export default Todos;

요약

react , ts로 함수형 컴포넌트를 만드려면 React.FC타입을 함수형 컴포넌트의 상수 옆에 사용함. 그리고 <>을 붙이고 필요한 형태의 props를 정의함 (props가 필요하다면)