[react]道具と道具の種類とreactmemo

1.propsとeventListener

📌 componentのpropsとHTML要素のeventListerの違いを理解します!

function App() {
  const [value, setValue] = React.useState("Save Changes");
  const changeValue = () => setValue("Revert Changes");
  return (
    <div>
      <Btn text={value} changeValue={changeValue} />
      <Btn text="Continue" />
    </div>
  );
}

textやbooleanだけでなくchangeValueなどの関数も使用できます

要素において、ChangeValueがEventListenerとして機能するかどうか

上のコードでは、changeValueは実際のeventListenerではなくBtnの支柱です.

したがって、このイベントはHTML要素に適用されます.(次のコードで示す)

function Btn({ text, changeValue }) {
  return (
    <button
      onClick={changeValue}
      style={{
        // 생략
      }}
    >
      {text}
    </button>
  );
}

😎 覚えておきたい

propsに値を入力しても、戻りのHTML要素は自動的に入力されません.

2. props

🔨 インストールと設定

（1）取付

// PropTypes
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>

// 첫번째 script source도 아래로 바꾸어줄 것 (버전)
<script src="https://unpkg.com/[email protected]/umd/react.development.js "></script>

(2)設定

// 리액트에 propTypes 설명하기
Btn.propTypes = {
  text: PropTypes.string,
  fontSize: PropTypes.number,
};

✅ prop types

📌 必要な支柱の識別を支援

Btn.propTypes = {
  text: PropTypes.string.isRequired,
  fontSize: PropTypes.number.isRequired,
};

componentはtextとfontSizeの2つの道具しか提供していません.

💖 メリット

function App() {
  return (
    <div>
      <Btn text="Save Changes" fontSize={18} />
      <Btn text={14} fontSize={"Continue"} />
    </div>
  );
}

proptypeのインストール

欲しいアイテムタイプ

propsを使用して、テキストにテキスト値を入力し、フォントサイズに数値値を入力します.

エラーが表示されない

文法的にエラーの内容がないので、エラーは表示されません.

proptypeのインストール

以下に示すように、コンソールでエラーを確認できます.

3. .isRequired

📌 構成部品のpropsが変わらない場合は、提供された関数の再レンダリングを防止できます.

の親コンポーネントのステータスが変更されると、親のすべての子供が再表示されます.これは、後でアプリケーションが遅くなる可能性があるため、React Memoを使用します.

function App() {
  const [value, setValue] = React.useState("Save Changes");
  const changeValue = () => setValue("Revert Changes");
  return (
    <div>
      <Btn text={value} onClick={changeValue} />
      <Btn text="Continue" />
    </div>
  );
}

🔎 いつ使いますか。

状況

のカラーボタンをレンダリングしたくない.

解決

propsが変更されない限り、React.memoレンダリングコンポーネント

を使用するかどうかを決定できます.

const MemorizedBtn = React.memo(Btn);
function App() {
  const [value, setValue] = React.useState("Save Changes");
  const changeValue = () => setValue("Revert Changes");
  return (
    <div>
      <MemorizedBtn text={value} onClick={changeValue} />
      <MemorizedBtn text="Continue" />
    </div>
  );
}