🐶

【React】遊戯王でuseState/useEffectを理解する

2024/08/06に公開

React

はじめに

タイトルとは全然関係ないのですが、最近スマブラのVIPで安定するようになってきました。
これは、多分ちゃんと適切な技を適切なタイミングで使えるようになったからだと思います。

Reactって比較的あんまり状態管理を理解していなくても書けちゃうところもあるので、結構そのままアウトプット出来たみたいな感じで行けちゃいますよね。（あ、VIPいけた。みたいに）

そんな手軽さがReactの良さかもしれませんが、さらに中級者に一歩踏み出そうとする場合は、レンダリングのタイミングやパフォーマンスを考える必要が出てきます。
React初心者から中級者へのステップとして、こちらの記事としてまとめたいと思います。

スマブラでいうところの「小ジャンプ」や「崖奪い」、マリカーでいうところの「ジャンプアクション」や「ドリフト」といったところでしょうか。

理解することも大切ですが、「小ジャンプ」や「ジャンプアクション」などのように、適切な場面で適切に使えるように、理解した上で現場でしっかりと使うようにしていきましょう。

レンダリングについて

状態管理を理解する上で、レンダリングを理解することは非常に重要です。
レンダリングをするということはどういうことかというと、簡単に言うと、画面の一部または全部を変更すると言うことです。

状態を変更したところで、画面上に反映されていなければあんまり使う意味ないですよね。

例えば、カウンターアプリを考えてみてください。
カウントアップのボタンを押しても画面上でずっと上のカウントが0のままになっていたら、カウンターアプリではないですよね。

画面上で、0という数字が1という数字に変更される場合、レンダリングが発生しています。

厳密に「レンダリング」がどのタイミングで起こっているのかどうかを知りたい方は、下記のような記事を参考にしてみてください。

Reactなりの定義があったり、いろんな定義があるので、ざっくり理解するとすると、画面の一部又は全部が変更される場合に、レンダリングされるということを認識していただければOKです。

useState

どんなことができる？

変更される可能性のある可能性のあるデータとそれを変更するためのメソッドを定義し、初期値を設定できます。

const [name, setName] = useState('')

上記の例は文字列型を状態として保持していますが、さまざまな型を状態として保持することができます。

レンダリングのタイミング

状態（state）が変更されるタイミングで再レンダリングされます。

使い方

以下の事例では、'name'が変更される可能性のあるデータ・setNameがnameを変更するためのメソッドとして、下記のような処理を行っています。

const [name, setName] = useState('mikaneko')のように、定義する。（この場合、nameの初期値はmikanekoになります）
nameの値を活用する。（この場合、画面上の名前の隣に描画しています。）
setName()メソッドを使用してnameの値を変更する。（この場合は、inputのonChangeで変更イベントがあるたびに、nameの値が変更されます。）
画面上のnameの値が変更される

const [name, setName] = useState('')
const changeName = (e) => {
　　setName(e.target.value);
};

return (
  <>
    <p>
      名前：　{name}
    </p>
    <input
      onChange={changeName}
      type={'text'}
      value={name}
    />
  </>
);

useEffect

どんなことができる？

第二引数に副作用関数（効果）の実行タイミングを制御する依存データを記述して、副作用を実行できます。（効果を発動できる。）

下記の例だと、countの値が更新される場合に、useEffectの第一引数の処理を実行することができます。

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

useEffect(() => {
  console.log("効果発動！");
  console.log("ブルーアイズホワイトドラゴンを特殊召喚！");
}, [count]);

（「副作用」といわれていますが、effectのそのままの意味は「効果」になります。）
（上の例は遊戯王をやったことがある方は、すこーしだけわかりやすいかもしれません。）

使い方

以下の事例では、効果を発動させたいタイミングを決めて、useEffectを使用しており、'name'は変更される可能性のあるデータとして定義しております。

 const [name, setName] = useState('')
// 第二引数になんもつけない
 useEffect(() =>{
  console.log('', name)
 })  //　<= レンダリングのたびに効果発動

 //第二引数に空の配列をつける
 // 
  useEffect(() =>{
  console.log('', name)
 }, [])　//　<= 初回レンダリングのみ効果発動
 
 // 第二引数の配列に依存データをいれる
  useEffect(() =>{
  console.log('', name)
 }, [name])　//　<= nameが変更されるたびに効果発動

まとめ

大分自分の趣味が入ってしまっている記事にはなってしまいましたが、useStateとuseEffectについて、理解できましたでしょうか。
もう少し深く理解したい方は、Reactの公式ドキュメントを読んでみてください。
もしかすると、こっちの方がわかりやすいかもしれません。

はじめに

レンダリングについて

useState

どんなことができる？

レンダリングのタイミング

使い方

useEffect

どんなことができる？

使い方

まとめ

Discussion