[React] 컴포넌트 props 타입 지정

typescript를 이용한 react에서 컴포넌트 props의 타입을 지정할 때 몇 가지 방법을 사용할 수 있습니다.

1. React.FC

import React from "react";

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
  return <div>{name}</div>;
};

export default MyComponent;

첫 번째 방법은 React.FC를 사용하는 방법입니다.

< > 사이에 타입을 삽입해주면 되는데요, 이 방법의 이점은 아래와 같습니다.

• props에 기본적으로 children이 들어있는 점
• 컴포넌트의 defaultProps, propTyps, contextTypes를 설정할 때 자동완성이 됨

하지만 몇 가지 단점들 때문에 React.FC를 권장하지 않는다는 의견도 있습니다.

• typescript 고유의 문법과 맞지 않음
• children을 기본적으로 제공하기 때문에 props 명세에 혼동을 줄 수 있음
• defaultProps를 선언해주더라도 props가 전달되지 않으면 오류가 뜸

2. :

import React from "react";

interface MyComponentProps {
  name: string;
}

const MyComponent = ({ name }: MyComponentProps) => {
  return <div>{name}</div>;
};

export default MyComponent;

typescript에서 타입을 지정해주는 방식처럼 :을 이용해주는 방법입니다.

참고

https://react.vlpt.us/using-typescript/02-ts-react-basic.html

[2. 리액트 컴포넌트 타입스크립트로 작성하기 · GitBook

2. 리액트 컴포넌트 타입스크립트로 작성하기 이번 섹션에서는 리액트 컴포넌트를 타입스크립트로 작성하는 방법을 알아보도록 하겠습니다. 프로젝트 생성 우선, 타입스크립트를 사용하는 리

react.vlpt.us](https://react.vlpt.us/using-typescript/02-ts-react-basic.html)

https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680#78b9

[10 TypeScript Pro tips/patterns with (or without) React

A missing style guide about how to write idiomatic JavaScript and React by using sane TypeScript patterns/features.

medium.com](https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680#78b9)

https://darrengwon.tistory.com/768

[함수형 컴포넌트 타이핑함에 있어 React.FC

를 회피할 것

화살표형 함수 컴포넌트 : React.FC 함수형 컴포넌트는 React.FC (functional Component의 약자) 타입을 지정하면 됩니다. 음... 화살표 함수로 지정하면 다음과 같이 하면 되구요 import React from "react"; int..

darrengwon.tistory.com](https://darrengwon.tistory.com/768)