React에 Type적용하기

동기

타입스크립트의 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로 전달되면 타입 에러 발생)