Zenn
😎

[React]stateとイベントリスナ

2023/06/29に公開
React
JavaScript
frontend
useState
tech

stateとイベントリスナ

stateはReactを使いこなすためにも重要な知識！

以前にReact基礎知識をおさえるという記事を書いてるのでそちらもご覧ください！

https://zenn.dev/airiswim/articles/e828f2ea0395b8

イベントリスナとは

イベントリスナとは何か
Responding to Events:イベントリスナー

React lets you add event handlers to your JSX.
Event handlers are your own functions that will be triggered in
response to interactions like clicking, hovering, focusing form inputs,
and so on.
和訳：
Reactにはイベントハンドラは、クリック、ホバー、フォーム入力のフォーカスなどの
インタラクションに反応してトリガーされる独自の関数です。
--公式より

簡単にいうと、
"画面上でイベントが発生した際に実行したい関数を登録しておく場所"をいう。

stateとは

コンポーネント単位で状態を保持する仕組みのこと。
コンポーネント内で管理されるデータの状態を表すもの。

状態...?
= 数値,文字列,配列等のwebアプリケーションを表示する時に用いられるデータのこと.
状態は変更可能な値のこと。
ユーザーの操作やアプリケーションの内部ロジックに応じて更新されることがある。

■ 補足：stateとpropsの違い

復習：stateとpropsの違いを説明できる？？

stateは
コンポーネント単位で状態を保持する仕組みのこと。

propsとの違いは？？

"データ(状態)を保持する"でいうと、propsもそうだが...

  • 親コンポーネントから子コンポーネントへデータを渡すものであり、読み取り専用。
    変更ができない。
    stateはそれぞれが独立した状態を保持することができるし、変更も可能。

Reactでは、Stateを管理するためにuseStateというフックを使用。

【一般的な構文】

const [state, setState] = useState(initialValue);
  • state:現在の状態の値を保持する変数
  • setState:状態を更新するための関数。
  • initialValue:状態の初期値を指定する。

■ EX.

import { useState } from "react";

const Example = () => {
  const [countA, setCountA] = useState(0);
  return (
    <>
    <p>ボタンAを{countA}回押しました！</p>
    <button onClick ={()=> {
      setCountA(countA + 1);
    }}>countA</button>
    </>
  )
};

export default Example;

useStateフックを使用してcountAとsetCountAを定義している。

countA: 現在のカウントの値を保持
setCountA:その値を更新するための関数

クリックボタンを押し、onClickイベントが発火し、
コンポーネントの中でcountAの値が変更されるたびに、
Reactは自動的に再レンダリングを行う。

ボタンをクリックするとsetCountA関数が呼び出され、countAの値が1増える。
この変更により、コンポーネント内の<p>タグのテキストが更新され、ユーザーに表示される。

stateとレンダリングの仕組み

補足：　レンダリングとは
Reactにおいて、レンダリングとは、仮想DOMを使ってUIの表示を更新するプロセス

再レンダリングが起こるのはいつか。

  • コンポーネントの state が更新された時。
  • 親のコンポーネントが再レンダリングされた時。
  • propsが更新された時。

ここをうまく説明書きたかったのですがまだまだでしたので、
開発し、再度勉強しながら、また載せたいと思います！

Discussion