[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이 들어가있다는 것 입니다.

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;

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

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

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

결론

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