[React] React.FC 의 의미와 사용하지 않는 이유

Intro

React.FC의 의미와 사용하지 않는 이유에 대해 알아보도록 하겠습니다. 

type Props = {

};

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

export default TestComponent;

현재 React typescript를 사용하고 있는 프로젝트에서 컴포넌트를 작성할 때 다음과 같은 방법을 사용합니다. 

 

 

FC를 사용하지 말아야 하는 이유 

하지만 🤨 React typescript는 그다지 좋은 방법이라고 합니다. 그중에서 가장 큰 이유는 props이 암시적으로 들어가 있기 때문입니다. 

 

• children을 암시적으로 가지고 있습니다.
• 제네릭을 지원하지 않습니다. 
• 네임 스페이스 패턴을 이용할 때 더 불편합니다. 
• FC를 이용하면 코드가 더 길어집니다. 

 

결국 React 18 version + 에서 사라졌다고 합니다. 혹시 React.FC를 사용하고 계신다면 유의해주세요 😉 !!

---

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

https://velog.io/@ww8007/Typescript-React.FC