[react]-属性値タイプの定義

prop-typesは,属性値のタイプ情報を定義する際に用いられる反応式パケットである.素子コードの可読性のためには、属性値のタイプ情報を必須とすることが望ましい.
javascriptはダイナミックタイプの言語なので、簡単で学びやすいプログラムを書くときに作業効率が高いです.しかし、大規模なプログラムを作成すると、生産性はかえって低下します.我々がreactionを用いる理由は,単純なプログラムを書きたいだけではないので,できるだけ静的タイプの言語を用いる.
これもタイプスクリプトが人気がある理由です.しかし、状況があまりよくないため、純粋なJavaScriptでしか書けない場合もある.
このため、反応器は、属性値タイプを定義するためのprop−typesパケットを提供する.タイプエラーを事前にチェックできるので、タイプスクリプトでなくても役立ちます.また、もう一つの利点は、タイプ定義自体が優れたドキュメントであることです.
コードにタイプ情報が必要なのはなぜですか?

レンダリング中にプロパティ値タイプエラーを確認します.

これは、

タイプのエラーを事前にチェックするのに役立ちます.

要素の論理を理解する必要がなく、属性値のタイプ情報を一目で理解できます.

使用方法

まずnpm install prop-typesでパッケージをインストールします.

prop-typesを使用してタイプ情報を追加します.

必須値または無効な属性値を入力すると、エラーメッセージが出力されます.

では、タイプ情報だけでなく、複数のタイプ情報を追加することもできる.

>ユーザ構成部品

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>
  );
}