React学習ログ #6｜フック

前回：React学習ログ #5｜画面の更新

フックの使用

チュートリアルリンク

フックとは？

コンポーネントでも下記は「関数コンポーネント」と呼ばれ、ただの関数で画面を返すだけです。
単純な静的HTMLを返しているだけですね。

function Profile() {
  return <h1>Hello</h1>;
}

フックを引っ掛けると、状態を持つことになります。
ここでいう状態とは、画面に影響する変数=値が変わったら、画面も変わるということです。

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

  return <p>{count}</p>;
}

代表的なフック

フック	何をするか
useState	値（状態）を持つ
useEffect	API通信・DOM操作などの副作用
useContext	グローバルな状態を読む
useRef	DOMや値を保持
useMemo	重い計算をキャッシュ
useCallback	関数をキャッシュ

フックについて(公式)

なんか色々難しい感じで書いていますが、状態を記憶したり変化させることが出来る動的な動きを設定出来るコンポーネントを作成する際に使用するものとして今は理解したいと思います。

コンポーネント間でデータを共有する

チュートリアルリンク

*図は公式サイトのものを流用しています。

前記事で実装したものを図解すると以下のようになります。

MyButtonというコンポーネントそれぞれにcountを持たせているので、ボタン1をクリックした際にはボタン1のcountが加算されて、ボタン2をクリックした際はボタン2のcountが加算されます。

それぞれ独立したボタンであり保持するデータや変更するデータも別々にしているパターンです。

では、ボタン1とボタン2のデータを共有したい場合はどうすればいいか。

それはMyButtonの親であるMyAppコンポーネントにフックを記載してcountを持たせるという方法を持ち入ります。

そうすることで、独立したMyButtonコンポーネントが持つcountではなく、共通のMyAppが持つcountを参照するためデータを共有することが出来ます。

まずは実際にコードを書いて画面で確認してみます。

src/App.jsx

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

ボタン1をクリックしてもボタン2をクリックしても、両方の値が加算されています。

実際にコードを読んでいきます。

MyButtonコンポーネントに与えていたstateをMyAppに変更します。

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

MyAppで加算用のコンポーネントhandleClickを管理しているので、それぞれのMyButtonにも共有のクリックハンドラを渡します。

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

コンポーネントに渡す値のことをpropsといいます。

最後にMyButtonコンポーネントで親コンポーネントから渡されたpropsを受け取ってbuttonに設定します。

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

このような親コンポーネントにstateを設定して子コンポーネントにpropsとして渡して共有する手法を「state のリフトアップ（持ち上げ）」と言います。

最後

以上でReactチュートリアルは完了となります。