(TypeScript) 블로그 타입스크립트 전환 후기 - 리액트

강좌3 - TypeScript - 6년 전 등록 / 5년 전 수정

블로그 타입스크립트 전환 후기 - 리액트

이전 글에서 이어집니다.

이번에는 리액트 컴포넌트를 타입스크립트로 전환한 것을 보여드리겠습니다. 코딩 스타일은 tslint:recommended를 따랐습니다.

Confirm.tsx

import * as classNames from 'classnames/bind';
import * as React from 'react';
const styles = require('../css/App.css');

const cx = classNames.bind(styles);

interface IProps {
  message: string;
  callback?: ((bool: boolean) => void) | null;
  yes: string;
  no: string;
}

class Confirm extends React.PureComponent<IProps> {
  public static defaultProps = {
    yes: '예',
    no: '아니오',
  };

  private onClickYes = () => {
    const { callback } = this.props;
    if (callback) {
      callback(true);
    }
  }

  private onClickNo = () => {
    const { callback } = this.props;
    if (callback) {
      callback(false);
    }
  }

  public render() {
    const { message, yes, no } = this.props;
    return (
      <div className={cx('confirm')}>
        <div className={cx('confirmMessage')}>
          <p>{message}</p>
          <button type="button" onClick={this.onClickYes} className={cx('confirmButton')}>{yes}</button>
          <button type="button" onClick={this.onClickNo} className={cx('confirmButton')}>{no}</button>
        </div>
      </div>
    );
  }
}

export default Confirm;

짧은 컴포넌트 하나를 골랐습니다(긴 건 부끄러워서...).

상단에 require이 있는데 웹팩 로더를 적용해야 하는 것은 어쩔 수 없이 require를 쓰는 게 나은 것 같습니다. 제 블로그는 CSS 모듈을 사용합니다.

그 아래 interface IProps가 나옵니다. 리액트의 props 타입을 정의합니다. 코드를 보면 아시겠지만 타입스크립트를 쓰면 prop-types 패키지를 사용할 필요가 없어집니다. 타입스크립트가 그 역할을 대신 할 수 있거든요. callback prop처럼 ?를 붙여준 것은 필수가 아닌 prop을 의미합니다.

class Confirm extends React.PureComponent<IProps>로 <>라는 꺽쇠가 눈에 띕니다. 제너릭이라고 불리는데요. 이 부분이 자바스크립트에는 없는 개념이라 좀 헷갈렸는데요. 적절한 비유인지는 모르겠지만 함수형 프로그래밍에서의 고차 함수를 떠올리시면 됩니다. 일반적인 값 대신 함수를 값으로 넘기는 것처럼, 제너릭을 사용해서 단순한 타입 대신 인터페이스나 타입 선언도 넘길 수 있습니다. 그러면 받은 쪽에서 알아서 그 타입을 활용합니다.

리액트 컴포넌트에서 제너릭은 그냥 첫 번째 칸에는 IProps(props 타입 정의)를 넣는다고 외우셔도 됩니다. 만약 state가 있는 컴포넌트라면 state의 interface를 정의해 React.Component<IProps, IState>하세요.

그 다음에 리액트가 제공하는 defaultProps, state같은 속성이나 componentDidMount, render같은 메서드 앞에 public을 붙여줍니다. 나머지 메서드는 public, protected나 private을 붙여주면 됩니다. 이것도 자바스크립트에는 없는 개념이라 익숙하지 않으실텐데 public의 경우 공개 메서드, private의 경우 현재 클래스 내에서만 쓸 수 있는 비밀 메서드라고 보시면 됩니다. protected는 상속받은 클래스도 조상 클래스의 메서드를 쓸 수 있게 해줍니다. 사실 private, protected, public은 안 붙여도 되는데 tslint에서 붙이라네요;;;

이번에는 함수형 컴포넌트입니다.

interface ILatestProps {
  comments: IStructuredComment[];
  isLoading: boolean;
}

const LatestComments: React.FunctionComponent<ILatestProps> = ({ comments, isLoading }) => {
  // 생략
  return <div className={cx('sectionBody')}>최신 댓글이 없습니다.</div>;
};

마찬가지로 Props를 정의해서 넣으면 됩니다. React.PureComponent나 React. Component 대신 React.FunctionComponent를 쓰시면 됩니다(또는 React.StatelessComponent와 React.SFC는 deprecated되었습니다).

컴포넌트는 쉽게 전환할 수 있었습니다. 다음 시간에는 Redux를 타입스크립트로 전환한 것에 대해 얘기해보겠습니다.

조회수:

ZeroCho Blog

게시글

블로그 타입스크립트 전환 후기 - 리액트

댓글