[TypeScript] 함수형 컴포넌트를 타입스크립트로 작성하는 기본적인 방법

TypeScript란?

TypeScript는 정적 타입 검사를 추가하여 개발자의 코드 작성과 디버깅을 더 안전하고 효율적으로 만드는 프로그래밍 언어다. Microsoft에서 개발하고 유지 보수하는 TypeScript는 JavaScript의 단점을 보완하면서도, JavaScript의 유연성과 기능을 그대로 유지한다.

프로젝트 생성

리엑트를 통해 타입스크립트를 연동하는 방법을 공부할것이다.
명령어는 다음과 같다.

yarn create react-app [프로젝트 이름] --template typescript

--typescript 가 있으면 타입스크립트 설정이 적용된 프로젝트가 생성된다.

타입스크립트 작성

Greetings.tsx

1.React.FC 사용

import React from 'react';

type GreetingsProps = {
  name: string;
  mark: string;
};

const Greetings: React.FC<GreetingsProps> = ({ name, mark }) => (
  <div>
    Hello, {name} {mark}
  </div>
);

Greetings.defaultProps = {
  mark: '!'
};

export default Greetings;

2.React.FC 사용하지 않음

import React from "react";

type GreetingsProps = {
  name: string;
  mark: string;
  optional?: string;
  onClick: (name: string) => void; // 아무것도 리턴하지 않는다는 함수를 의미합니다.
};

function Greetings({ name, mark, optional, onClick }: GreetingsProps) {
  const handleClick = () => onClick(name);
  return (
    <div>
      Hello, {name} {mark}
      {optional && <p>{optional}</p>}
      <div>
        <button onClick={handleClick}>Click Me</button>
      </div>
    </div>
  );
}

Greetings.defaultProps = {
  mark: "!",
};

export default Greetings;

장점

React.FC 를 사용 할 때는 props 의 타입을 Generics 로 넣어서 사용한다. 이렇게 React.FC를 사용해서 얻을 수 있는 이점은 두가지가 있다.

첫번째는, props 에 기본적으로 children 이 들어가있다는 것 이다.

두번째는 컴포넌트의 defaultProps, propTypes, contextTypes 를 설정 할 때 자동완성이 될 수 있다는 것이다.

단점

children 이 옵셔널 형태로 들어가있다보니까 어찌 보면 컴포넌트의 props 의 타입이 명백하지 않는다.
예를 들어 어떤 컴포넌트는 children이 무조건 있어야 하는 경우도 있을 것이고, 어떤 컴포넌트는 children 이 들어가면 안되는 경우도 있을 것이다.
React.FC 를 사용하면 기본적으로는 이에 대한 처리를 제대로 못하게 된다. 만약에 하고 싶다면 결국 Props 타입 안에 children 을 설정해야한다.

출처: https://react.vlpt.us/using-typescript/02-ts-react-basic.html/