StateとPropsについて - React

Stateとは

システム開発において、ユーザーの入力値など現在の状態を保持しておく必要が出てきます。こういったコンポーネントが固有でもつ状態やデータのことをstateと呼んでいます。
stateが変化すると、そのコンポーネントは再レンダリングされ、UIが更新されます。

useStateを使ったstateの管理

useStateは、コンポーネント内のstate（状態）を管理するためのReactフックです。

useStateの使い方

useStateは、コンポーネントのトップレベルで呼び出してstate変数を宣言します。

import { useState } from 'react';

export default function App() {
  // トップレベルで呼び出す
  const [state, setState] = useState(initialState);
  
  return ()
}

• 引数
  initialState : stateの初期値を設定します。
  初回レンダー後は無視されます。
• 返り値
  useStateの戻り値を配列の分割代入で取得します。
  state : 現在の状態を指します。初回レンダー時は、引数で渡したinitialSateと同じ値になります。
  setState : state（状態）を更新するための関数で、再レンダーをトリガーします。

useStateの注意点

• useStateはフックであるため、コンポーネントのトップレベルで呼び出す必要があります。ループや条件文の中で呼び出すことはできません
  ※トップレベル・・・コンポーネントの関数本体の中で、他の関数やループの中ではなく、直接的に実行されるコード部分。
• 状態の変更によりレンダリングが発生するため、頻繁に変更がある状態や重い処理は慎重に扱う必要があります

useStateを使ったカウントアップボタン

useStateフックでcountというstate変数を初期化し、ボタンをクリックするたびに、setCount関数を使ってcountの値を1増やし、再レンダリングすることでUIを更新します。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
}

Propsとは

propsは、親コンポーネントから子コンポーネントにデータを渡すための手段です。子コンポーネントはpropsを受け取って表示したり、動作に利用したりしますが、propsは子コンポーネント内で直接変更することはできません。

propsを渡して名前を表示する

親コンポーネントで子コンポーネントを呼び出すときに、nameに値を渡し、子コンポーネントでnameというpropsを受け取り表示します。

// 子コンポーネント
export default function Child(props) {
  return <div>こんにちは、{props.name}さん！</div>;
}

// 親コンポーネント
import Child from "./Child";

export default function Parent() {
  return (
    <div className="App">
      <h1>Props</h1>
      <Child name="太郎" />
    </div>
  );
}

複数のpropsを設定する

propsはオブジェクトとして渡され、各プロパティには親コンポーネントから渡されたデータが含まれます。以下の例では、nameとage、hobbyの2つのプロパティが含まれるpropsを子コンポーネントで受け取り表示しています。

// 子コンポーネント
export default function Child(props) {
  return <div>私は{props.name}です。{props.age}歳で、趣味は{props.hobby}です。</div>;
}

// 親コンポーネント
import Child from "./Child";

export default function Parent() {
  return (
    <div className="App">
      <h1>Props</h1>
      <Child name="太郎" age={17} hobby="サッカー" />
    </div>
  );
}

propsの注意点

• オブジェクトとして渡される : propsはオブジェクト形式で渡され、各プロパティに親コンポーネントから指定された値が入ります。そのため、propsを受け取るときはオブジェクトの構造を考慮して扱う必要があります
• 読み取り専用 : 子コンポーネントで受け取ったpropsは読み取り専用であり、子コンポーネント内で直接変更することはできません。propsを変更したい場合は、親コンポーネントから新しい値を渡すようにします