컴포넌트 정의할 때 타입 : FC , VFC(옛 것) , SFC(더 옛 것)

 

🌈 Component에 Type 지정

TS를 사용하여 아래처럼 Modal을 component로서 사용할 때 , Modal에 타입을 지정해줘야한다. 

어떻게 Type을 설정해야할까?

const Modal: 타입 뭐쓰지? = ({ prop1, prop2, children }) => {
  return (
    <div>
      <h1>{prop1}</h1>
      <p>{prop2}</p>
      {children}
    </div>
  );
};

export default Modal;

 

☀️ React 18버전 이전

 

react 18버전 이전에는 컴포넌트를 정의할 때  아래와 같은 타입으로 정의해서 사용했다. 

 

React.FC: React.FunctionComponent => component의 children 을  포함
React.VFC: React.VoidFunctionComponent  => component의 children 을  미포함

React.SFC: React.StatelessFunctionComponent(react.FC의 구버전)

 

 

18버전 이전 children 을 포함한 컴포넌트 타입 지정 ▼

MyCompontentProps에 children 의 타입을 지정해주지 않아도 자동으로 FC에 children 타입이 들어있음.

import React from 'react';

interface MyComponentProps {
  prop1: string;
  prop2: number;
  // 여기에 추가 props 정의 가능
}

const MyComponent: React.FC<MyComponentProps> = ({ prop1, prop2, children }) => {
  return (
    <div>
      <h1>{prop1}</h1>
      <p>{prop2}</p>
      {children}
    </div>
  );
};

export default MyComponent;

 

but! Children 이 항상 필요한건 아니고 혼란을 일으킬 수 있어서 18버전 이후에는 사용방법이 바꼈다.

 

⭐️ React 18버전 이후

React.SFC 와 React.VFC는 사라졌다. 이제 못 쓴다.

React.FC 만 남았는데 어떻게 사용하냐면

컴포넌트에 타입 지정을 해줄 때 

 

children : React.ReactNode

 

이게 추가되야한다.(react에서 정해놓은 children 타입임)

import React from 'react';

interface MyComponentProps {
  prop1: string;
  prop2: number;
  children?: React.ReactNode; // children 속성을 선택적으로 추가
  // 여기에 추가 props 정의 가능
}

const MyComponent: React.FC<MyComponentProps> = ({ prop1, prop2, children }) => {
  return (
    <div>
      <h1>{prop1}</h1>
      <p>{prop2}</p>
      {children}
    </div>
  );
};

export default MyComponent;

 

 

---

🌼 참고

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components

Function Components | React TypeScript Cheatsheets