React.FC 지양하기

React.FC란?

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

React.FC 사용해보기

 type UserProps = {
	name: string;
}; 

const Profile: React.FC<UserProps> = ({name}) => {
	<div> 안녕하세요, {name}님 <div>
);

export default Profile;

React.FC를 사용하는 경우 위와 같이 props의 타입을 Generics로 넣어서 사용한다.

 

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

우선 지난 문서이긴 하지만 CRA에서 기본 템플릿에 FC를 빼야한다는 PR이 올라왔고, 그것이 실제로 반영되었다고 한다. 그 이유는 아래와 같다.

1. children을 암시적으로 가지고 있다.

React.FC 사용 시 props는 children을 암시적으로 가지게 된다.

이는 꼭 타입스크립트에 한정하지 않더라도 안티패턴이라고 한다.

const App: React.FC = () => {
  return <div>hi</div>;
};

const Example = () => {
  <App>
    <div>Unwanted children</div>
  </App>;
};

 

이점을 장점이라고 생각할 수도 있는 부분이지만, 하지만 타입스크립트를 쓰는 이유중 하나가 정확한 타입을 지정을 해주면서 자바스크립트 코드의 안전성을 향상 시키는 부분인데 

FC를 사용하면 컴포넌트에 children이 있을 수 있다는 것을 가정하여 언제든지 children의 타입 지정 없이 전달이 가능하기 때문에 타입이 명확하지 않다는 단점이 있다.

 

2. 타입스크립트의 제네릭 문법을 지원하지 않는다.

다음과 같이 제네릭 컴포넌트를 작성한다고 예를 들어보자.

type GenericComponentProps<T> = {
  prop: T;
  callback: (t: T) => void;
};

const GenericComponent = <T>(props: GenericComponentProps<T>) => {
  /*...*/
};

그러나 이런 형태는 React.FC에서 허용되지 않는다. 왜냐하면 T를 넘겨줄 방법이 없기 때문입니다. 

const GenericComponent: React.FC</* ??? */> = <T>(props: GenericComponentProps<T>) => {/*...*/}

3. 네임 스페이스 패턴 이용시 더 불편하다.

다음과 같이 연관성 있는 컴포넌트에 대해서 네임 스페이스 패턴을 적용하는 방법이 있다.

<Select>
  <Select.Item />
</Select>

이를 FC를 사용할 때 물론 쓸 수는 있지만 매우 불편하다.

// FC를 사용할 때
const Select: React.FC<SelectProps> & { Item: React.FC<ItemProps> } = (
  props
) => {
  /* ... */
};
Select.Item = (props) => {
  /*...*/
};

// FC를 사용하지 않을 때
const Select = (props: SelectProps) => {
  /* ... */
};
Select.Item = (props: ItemProps) => {
  /*...*/
};

4. 코드가 길어진다...

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

---

결국 리액트 18 이상에서 없어졌습니다.

친절하신 댓글 제보로 내용을 추가합니다.

리액트 18 업데이트로, FC의 암시적인 children이 삭제되었습니다. 해당 변경 사항은 이 PR에서 확인할 수 있습니다.

 

그래서 어떻게 사용할까?

가장 일반적이고 간단한 방법은 props 옆에 타입을 정의해주는 것이다.

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

 

 

 

---

https://velog.io/@frombozztoang/React.FC-%EC%82%AC%EC%9A%A9-%EC%A7%80%EC%96%91%ED%95%98%EA%B8%B0

https://emewjin.github.io/why-not-fc/