리액트에서 타입 스크립트를 사용할 때 문제점을 한번 알아보자.
export const Child = ( { color }: ChildProps) => {
return <div>{color}</div>;
}여기서 타입스크립트는 Child 컴포넌트가 ChildProps의 타입을 인수로 받을 것으로 알려주는 것이다.
하지만 타입스크립트 입장에서는 이 컴포넌트가 리액트 컴포넌트인지 다른 종류의 컴포넌트인지 전혀 알지 못한다.
위의 코드에서 ChildProps를 받고 리턴으로 JSX를 리턴한다는 것만 알 수 있다. 함수에는 다른 자바스크립트 라이브러리가 올 수도 있다. 그래서 JSX를 리턴을 하고 있지만 타입스크립트는 리액트에서 사용될 JSX를 리턴한다는 사실은 모른다.
모든 리액트 컴포넌트는 _propTypes, displayName, defaultProps, contextTypes_을 프로퍼티로 가질 수 있다. 하지만 여기서는 해당 프로퍼티를 사용할 수가 없다. 예를 들어 Child.displayName을 입력하면 실제 존재하지 않는다고 표시된다. (마우스 오버를 해도 does not exists on type으로 표시)
아래와 같이 Child. 을 해도 IDE에서 리액트 컴포넌트 인지를 인지하지 못한다.
이것은 타입스크립트에게 우리가 지금 만드는 컴포넌트가 리액트 컴포넌트라는 사실을 알려주지 않아서 발생하는 문제이다. 이 문제를 해결하기 위해서 함수형 컴포넌트를 조금 다르게 정의해보자.
export const Child: React.FC<ChildProps> = ({ color }) => {
return <div>
{color}
</div>;
};여기서 React.FC는 리액트의 함수형 컴포넌트를 의미한다.
- 'Child' 는 리액트 컴포넌트가 된다.
- 'Child'는 propsTypes와 contextTypes 같은 프로퍼티를 사용할 수 있다.
- 'Child'는 ChildProps 타입을 props으로 받는다.
Child. 을 누르면 아래와 같이 IDE(intellij)에서 자동완성이 가능하다. (code에서도 가능하다)
React.FC는 React.FunctionComponent와 동일하며 축약한 이름이다.
이렇듯 리액트 컴포넌트를 만들 때는 반드시 React.FC의 타입을 추가하여 리액트 컴포넌트임을 타입스크립트에게 알려줘야 한다.
참고
https://www.udemy.com/course/react-and-typescript-build-a-portfolio-project
