타입스크립트의 Types는 자바스크립트의 동적 타입(Implicity) 으로 인해 야기될 수 있는 문제를 해결할 수 있는 강력한 기능입니다.
이를 리액트 컴포넌트의 props에 대한 타입을 잡을때 유용하게 쓰일것입니다.
FunctionComponent
리액트에서는 FunctionComponent
라는 함수형 컴포넌트를 위한 타입을 제공해주는데요, 아래와 같이 사용할 수 있습니다.
import React, { FunctionComponent } from 'react'
import Text from 'components/Text'
const IndexPage: FunctionComponent = function () {
return <Text text="Home" />
}
export default IndexPage
우선 제네릭이라는 개념에 대해서 알 필요가 있습니다. 하지만 해당 포스팅에선 제네릭 개념을 상세히 알아보진 않을 것이기에..
잘 모르신다면 제네릭이란? 해당 링크로 제네릭에 대한 개념에 대해서 자세히 알아볼 수 있습니다.
따라서 제네릭을 적용하여 리액트 컴포넌트를 작성 시, 다음과 같습니다.
import React, { FunctionComponent } from 'react'
interface TextProps {
text: string
}
const Text: FunctionComponent<TextProps> = function ({ text }) {
return <div>{text}</div>
}
export default Text
TextProps
인터페이스를 정의 후, Text
컴포넌트의 타입으로 지정 시 제네릭을 할당할 수 있습니다.
그렇게 되면 props인 text는 반드시 TextProps
인터페이스내에 정의된 string 타입만 허용됩니다. (그 외 숫자와 같은 값이 props로 전달되면 타입 에러 발생)