React.FC 화살표 함수 vs function()

문제 상황 !
React hooks로 프로젝트를 구성하려고 예제들을 찾아보다보니 어떤 곳에서는 const App: React.FC = () => { }로 컴포넌트를 선언하고 어떤 곳에서는 function() 키워드를 사용해서 선언하는 것을 보고 어떠한 차이점이 있는지, 어떤 것이 더 좋은 방법인지 궁금해졌다.

타입스크립트랑 함께 쓸 때 !

  • React.FC의 장점

    • props의 타입을 Generics로 넣어서 사용
      • props에 기본적으로 children이 들어가있다.
      • 컴포넌트의 defaultProps, propTypes, contextTypes를 설정할 때 자동완성이 될 수 있다.

  • React.FC의 단점

    • children이 옵셔널 형태로 들어가있다보니 컴포넌트의 props 의 타입이 명백하지 않다.

      • children이 필요한 컴포넌트가 있고 있으면 안되는 컴포넌트들이 있을 것
      • 그에 대한 처리를 하고 싶다면 Props의 타입을 따로 지정해야함
      1
      2
      3
      4
      type GreetingProps = {
        name: string;
        children: React.ReactNode;
      };

    • defaultProps가 제대로 동작하지 않는다

      • 비구조화 할당을 하는 과정에서 기본값을 설정해주어야 제대로 작동한다.
        밑의 과정이 무의미해지는 것
        1
        2
        3
        Greetings.defaultProps = {
          mark: "!",
        };

따라서 위의 단점을 해결하기 전까지는 React.FC의 사용이 권장되지 않는다.
=> function()사용 권장