【React】イベント,Props,Stateとは

この記事の目的

• Reactの理解とアウトプット、振り返り用
• Reactでよく使われている基本的な技術を言語化できるようする

イベント

イベントとはユーザが「クリック」や「入力」などの操作行うことで、
イベント処理とは、ユーザが「クリック」や「入力」などの操作が発生したときにプログラム側が行う処理のことを言います。

import React from "react";
import ReactDom from "react-dom";

const App = () => {
  // ボタンクリックで呼び出すアロー関数を定義する
  const onClickButton = () => alert();
  return (
    <> 
      <h1>Reactイベント処理</h1>
      <p>React学習中</p>
      <button onClick={onClickButton}>ボタン</button>
    </>
  );
};
export default App;

イベントまとめ

• HTMLタグの中で扱うイベントやスタイルの名称はキャメルケースとする。
• {}で囲った部分はjavascriptを書くことができる。
• イベントはcamelCaseで名付ける（「onclick」ではなく「onClick」）
• イベントハンドラには文字列ではなく関数を渡す（{onClickButton}部分）

Props

Propsとは親から子のコンポーネントへ値を渡すために利用するもの。
引数みたいなものとらえるとわかりやすいかと思います。

例として、色のついたメッセージを返すコンポーネント（ColorfulMessage）に対してpropsでメッセージの色を渡してみます。

./components/ColorfulMessage.jsx

import React from "react";

// ColorfulMessageコンポーネントを定義し引数としてpropsを受け取る
export const ColorfulMessage = (props) => {
  // propsオブジェクトから分割代入でcolorとchildrenを受け取る
  const { color, children } = props;
  const contentStyle = {
    color,
    fontSize: "18px"
  };
  return <p style={contentStyle}>{children}</p>;
};

./App.jsx

import React from "react";
// ColorfulMessageコンポーネントをインポートする
import { ColorfulMessage } from "./components/ColorfulMessage";

const App = () => {
  // ボタンクリックで呼び出すアロー関数を定義する
  const onClickButton = () => alert();

  //ColorfulMessageコンポーネントにcolorというPropsを渡す
  return (
    <> 
      <h1>ReactのProps</h1>
      <ColorfulMessage color="blue">React学習中</ColorfulMessage>
      <ColorfulMessage color="pink">Props例題学習中です</ColorfulMessage>
      <button onClick={onClickButton}>ボタン</button>
    </>
  );
};

export default App;

propsまとめ

• Propsとはコンポーネントに対して渡す引数のようなもの。
• コンポーネントタグで囲んだ要素はpropsオブジェクトのchildrenプロパティとして受け取ることができる。

State（useState）

Stateとは「状態」という意味になります。
Stateとはコンポーネント利用時に設定ができる値のことで、Propsとは異なり後から変更することができます。
Stateを扱う場合、useStateという関数を使用します。

例として、レベル０の状態からボタンを押下することで+1加算された状態にしてみます。

./App.jsx

// useStateをインポート
import React, { useState } from "react";
import { ColorfulMessage } from "./components/ColorfulMessage";

const App = () => {
  // ボタンが押されたら、State（num）をインクリメントして更新する
  const onClickCountUp = () => {
    setNum(num + 1); // UseState関数から分割代入で受け取ったState更新用の関数を呼び出す
  };
  // Stateを扱う場合、useStateという関数を使用する
  // useStateの中から配列の分割代入で1つ目として「Stateとして使用する変数名」2つ目として「Stateの更新用の関数」を受け取る
  const [num, setNum] = useState(0);   // [変数名, set変数名]と命名するのが一般的

  // onClickイベントにState更新処理を登録
  // State（num）を表示する onClickCountUpが呼ばれるたびにインクリメントされた状態で表示が更新される
  return (
    <> 
      <h1>ReactのProps</h1>
      <ColorfulMessage color="blue">React学習中</ColorfulMessage>
      <ColorfulMessage color="pink">State例題学習中です</ColorfulMessage>
      <button onClick={onClickCountUp}>学習レベルアップ！</button>
      <p>{num}</p>
    </>
  );
};

export default App;

Stateまとめ

• Stateとはそれぞれのコンポーネントが持っている可変の状態のこと。
• 条件によって動的に変わる部分をStateとして定義してあげることで様々な画面を表示していくことができる
• コンポーネント内で動的に変わる部分は、useStateで定義して変数と更新関数と初期値を設定していく。
• Stateが変更されると再レンダリングする。
• Stateを扱う場合はuseStateをインポートしuseStateという関数を使用する