<타입스크립트 프로그래밍> 9장: 프론트엔드 프레임워크와 백엔드 프레임워크 정리

9장: 프론트엔드 프레임워크와 백엔드 프레임워크

9-1. 프론트엔드 프레임워크

9-1-1. React

• 자바스크립트로 리액트를 사용하는 것보다 타입스크립트로 리액트를 사용하면 프론트엔드 개발팀의 생산성은 향상될 수 있다

• tsconfig.json에 아래 내용을 추가하면 리액트 프로젝트에서 TSX를 지원하게 된다

  {
    "compilerOptions": {
      "jsx": "react"
    }
  }

• 내부적으로 타입스크립트는 TSX 타입을 넣고 뺄 수 있는 몇 가지 후크(hook)를 제공한다

• TSX 타입들은 global.JSX 네임스페이스에 존재하는 특별한 타입으로, 이 네임스페이스를 참고하여 프로그램에 쓰인 TSX 타입 들이 올바른지 판단한다

• 리액트에서 컴포넌트(함수/클래스)는 프로퍼티 몇 개를 입력받아 TSX를 렌더링한다

  import React from 'react';
  
  // 💡FancyButton 컴포넌트에 전달할 수 있는 프로퍼티 집합 선언
  type Props = {
    isDisabled?: boolean;
    size: 'Big' | 'Small';
    text: string;
    /**
     * 💡 리액트는 DOM 이벤트들을 위한 고유의 래퍼 타입 집합을 제공함
     *  - 일반 DOM 이벤트 타입 대신 리액트의 이벤트 타입을 사용해야 함
     */
    onClick(event: React.MouseEvent<HTMLButtonElement>): void;
  };
  
  export function FancyButton(props: Props) {
    const [toggled, setToggled] = React.useState(false);
  
    return <button
      className={'Size-' + props.size}
      disabled={props.isDisabled || false}
      onClick={e => {
        setToggled(!toggled);
        props.onClick(e);
      }}
    >{props.text}</button>
  }

• 위 예제처럼 렌더링 함수 컴포넌트에서 타입스크립트는 다음을 강제한다

  • JSX 문법을 잘 지켜야 한다 (태그는 무조건 닫기, 태그명 오타 있으면 안됨)
  • <FancyButton />을 인스턴스화할 때 필요한 모든 프로퍼티(size, text, onClick 및 선택형)를 FancyButton에 전달해야 하며, 프로퍼티는 모두 올바른 타입을 가져야 한다
  • 추가로 불필요한 프로퍼티는 전달하지 않아야 한다