[React] - 속성값 타입 정의하기

prop-types는 속성값의 타입 정보를 정의할 때 사용하는 리액트 공식 패키지다. 속성값의 타입 정보는 컴포넌트 코드의 가독성을 위해서 필수로 작성하는 게 좋다.

자바스크립트는 동적 타입언어로 타입이 없기 때문에 배우기 쉽고 간단한 프로그램을 작성할 때는 생산성이 좋다. 하지만 큰 규모의 프로그램을 작성할 때는 오히려 생산성이 떨어진다. 우리가 리액트를 사용하는 이유는 간단한 프로그램만 작성하려는 것은 아니기 때문에 가능하면 정적 타입 언어를 사용하는 게 좋다.

타입스크립트가 인기를 얻는 이유도 이 때문이다. 하지만 상황이 여의치 않아서 순수자바스크립트 만으로 작성을 해야하는 경우도 있다.
이를 위해서 리액트에서는 속성값 타입을 정의할 수 있는 prop-types 패키지를 제공한다. 타입 오류를 사전에 검사할 수 있기 때문에 타입스크립트 만큼은 아니더라도 도움이 되긴 한다. 그리고 또다른 장점은 타입 정의 자체가 훌륭한 문서가 된다는 점이다.

코드에서 타입 정보가 필요한 이유

• 렌더링하는 과정에서 잘못된 속성값 타입을 검사해준다.
• 타입에러를 사전에 검사할 수 있으므로 도움이 된다.
• 컴포넌트의 로직을 이해하지 않고도 속성값의 타입 정보를 한눈에 파악할 수 있다.

사용방법

• 먼저 npm install prop-types 로 패키지를 설치해준다.
• prop-types를 이용해서 타입 정보를 추가한다.
• 필수값이나 잘못된 속성값을 입력하면 에러 메시지가 출력된다.
• 아래 타입 정보뿐만 아니라 다양한 타입 정보를 추가할 수 있다.

> User 컴포넌트

import PropTypes from "prop-types";

User.propTypes = {
  male: PropTypes.bool.isRequired,
  age: PropTypes.number,
  type: PropTypes.oneOf(["gold", "silver", "bronze"]),
  onChangeName: PropTypes.func, // (name: string) => void
  onChangeTitle: PropTypes.func.isRequired,
};

export default function User({ type, age, male, onChangeName, onChangeTitle }) {
  function onClick1() {
    const msg = `type: ${type}, age: ${age ? age : `알 수 없음`}`;
    log(msg, { color: type === "gold" ? "red" : "black" });
    // ...
  }
  function onClick2(name, title) {
    if (onChangeName) {
      onChangeName(name);
    }
    onChangeTitle(title);
    male ? goMalePage() : goFemalePage();
    // ...
  }
  // ...
  return null;
}

function goMalePage() {}
function goFemalePage() {}

> App 컴포넌트

import React from "react";
import User from "./User";

export default function App() {
  return (
    <div>
      <p>실전 리액트</p>
      <User onChangeTitle={() => {}} male={true} type={"gold"} />
    </div>
  );
}