2-1. TypeScript로 컴포넌트 작성하기

2장 간단하게 페이지 띄워보기

2-1. TypeScript로 컴포넌트 작성하기

 

1) TypeScript의 핵심 기능, Types

리액트에서는 함수형 컴포넌트를 위해 FunctionComponent 타입을 제공한다

 

// index.tsx
import React, { FunctionComponent } from 'react'
import Text from 'components/Text'

const IndexPage: FunctionComponent = function () {
  return <Text text="Home" />
}

export default IndexPage

 

 

 

2) React에서 Types를 잘 활용할 수 있게 해주는 Generic

Generic : 어떤 클래스나 함수에서 사용할 타입을 사용할 장소에서 결정할 수 있게 해주는 기능

 

예시) 타입스크립트로 만든 Stack 자료구조

 

class Stack<DataType> {
  private data: DataType[] = []

  constructor() {}

  push(item: DataType): void {
    this.data.push(item)
  }

  pop(): DataType {
    return this.data.pop()
  }
}

const stack = new Stack<number>()

stack.push('10') // error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

 

이처럼 인스턴스 생성 시점에서 타입을 정의할 수 있다.

미리 정의한 타입과 다른 타입의 데이터가 추가되면 에러를 발생시켜 나중에 발생할 수 있는 에러를 미리 방지해준다.

 

Generic을 활용해 Text.tsx를 아래처럼 작성

 

// Text.tsx
import React, { FunctionComponent } from 'react'

interface TextProps {
  text: string
}

const Text: FunctionComponent<TextProps> = function ({ text }) {
  return <div>{text}</div>
}

export default Text

 

FunctionComponent 타입에 TextProps 제네릭을 추가

=> 컴포넌트가 받는 props가 어떤 것이고 타입은 무엇인지(위에서는 text(string)) 지정 가능

 

index.tsx의 IndexPage 컴포넌트에서는 string 타입의 데이터를 props로 넘기고 있는데 이를 숫자로 바꾸면?

 

import React, { FunctionComponent } from 'react'
import Text from 'components/Text'

const IndexPage: FunctionComponent = function () {
  return <Text text={10} /> // error TS2322: Type 'number' is not assignable to type 'string'.
}

export default IndexPage

 

이렇게 잘못된 props에 대해 타입 체크 가능