TypeScript로 React 컴포넌트 명시하기

👉 작성 방법 고르기

명시 방법은 아래 조건에 따라 적절하게 작성하면 된다.
1)컴포넌트가 children을 포함하는지
2)추가적인 타입 정보를 자동으로 제공할 것인지
3)props 타입을 명확하게 정의하고 싶은지

👉 지정한 type만 명시

Interface IProps {
	children : React.ReactNode;
	title: string;
	desc?: string;
}
Const Wrap = ({children, title, desc} : IProps) =>{
	return (
		…
)}

• React.FC 타입을 사용하지 않고, 함수 매개변수의 destructuring과 함께 props 타입을 명시함.
• IProps 타입을 직접 사용하여 컴포넌트의 props를 정의합니다.
• 장점)
  - children이 필요하지 않은 컴포넌트에서도 사용하기 좋음.
  - 명시적으로 props를 정의하므로, props의 타입을 명확하게 알 수 있음.
  - 불필요한 타입 정보를 포함하지 않음.
• 단점)
  - children을 자동으로 포함하지 않음 => children이 필요할 때는 명시적으로 추가해야 함.
  - defaultProps, propTypes, displayName 등의 타입 정보를 자동으로 포함하지 않음.

👉 React.FC 타입 사용하여 명시.

Const Wrap : React.FC<IProps> = ({children, title, desc}) =>{
	return (
		…
)}

• React.FC (또는 React.FunctionComponent) 타입을 사용하여 컴포넌트를 정의한다.
• IProps 제네릭을 통해 props의 타입을 정의한다.
• 컴포넌트의 props는 자동으로 IProps 타입을 따른다.
• 장점)
  - 기본적으로 props에 children을 포함 => children을 명시적으로 추가할 필요 없음!
  - 컴포넌트에 defaultProps, propTypes, displayName 등의 추가적인 타입 정보를 자동으로 제공.
• 단점:
  - children이 항상 props에 포함되므로, children이 필요 없는 컴포넌트에는 부적합할 수 있음.
  - React.FC의 제네릭을 통해 전달된 props 타입이 props로 명시되지 않는 경우, 타입 오류를 쉽게 간과할 수 있음.

  ---

  근데 React.FC를 이용하여 작성해도 children을 type 지정 구문에 써주지 않으면 없다고 에러가 뜬다.
  React.FC로 작성한다고 해도 children type을 명시해주는게 안전하다.