React課題4 調べたこと ✏️

こんにちは、はるです.

所属している「もりけん塾」でReact課題に取り組んでいます.
問題文やレビュー内容は非公開なので、課題で調べたことをまとめることにしました.

初心者の学習ノートなので、認識の間違えている点がありましたらお問い合わせからご指摘いただけるとうれしいです.

Stateとは？
Stateの基本
まとめ

Stateとは？

Stateは、コンポーネントの’状態’を保持するためのもの.
これにより、ユーザーのアクションや時間の経過などに応じて、コンポーネントの表示や振る舞いを動的に変更することができる.

Stateの基本

コンポーネント内でuseState関数を使ってStateを宣言.
useStateは、Stateの現在の値(状態)と、その値を更新するための関数を返します。

フックの一種

書籍では「useState関数はフックの一種」という一節を読んだ.

フックとは？

フックはReact 16.8で導入され、コンポーネントにStateやライフサイクル機能などを追加することを可能にしたもの.これにより、クラスコンポーネントのみに限られていた多くの機能が、よりシンプルで再利用可能な方法で関数コンポーネントでも利用できるになったらしい.

ライフサイクル機能とは？

コンポーネントの作成から破棄までの様々な段階で、特定の動作を行うためのメソッドのセット. と調べた✏️

わからない用語しか出てこない. ライフサイクル機能は用語として調べただけで全然理解していないけど進む.

useStateの使い方

useStateを使うとき、’初期状態’ を引数として渡す.

/* 構文 */
const [value, setValue] = useState(initialValue);

・value: 現在の状態の値 = State変数
・setValue: その状態を更新する関数. 通常State変数 **に対してset**という名前にする.
・initialValue: Stateの初期値

∟この構文では、配列の分割代入を使って、状態の値（value）とその更新関数（setValue）を取得する.

使い方の例

テキストの表示・非表示の切り替えをuseStateを使ってテキストの表示状態を管理して書いてみる.

import { useState } from 'react';

export default function ToggleText() {
　const [isTextVisible, setIsTextVisible] = useState(false);

　return (
　　<div>
　　　<button onClick={() => setIsTextVisible(!isTextVisible)}>
　　　　{isTextVisible ? 'テキストを非表示' : 'テキストを表示'}
　　　</button>

　　　{isTextVisible && <p>ここに表示されるテキスト</p>}
　　</div>
　);
}

冗長かな….. (最適解あったらぜひ教えてください…)

初期値としてfalseを渡して、Stateがfalseの時は非表示、trueの時は表示になる.
こんななりました.

() => setIsTextVisible(!isTextVisible)の部分を別の関数に切り出した方がいいのかな.

import { useState } from 'react';

export default function ToggleText() {
　const [isTextVisible, setIsTextVisible] = useState(false);

　// 切り出した関数
　const toggleVisibility = () =>  {
　　setIsTextVisible(!isTextVisible);
　}

　return (
　　<div>
　　　<button onClick={toggleVisibility}>
　　　　{isTextVisible ? 'テキストを非表示' : 'テキストを表示'}
　　　</button>

　　　{isTextVisible && <p>ここに表示されるテキスト</p>}
　　</div>
　);
}

こうか… ?

単なる試行錯誤のブログになってしまった…

また、初期値として設定する値を、コンポーネントをrederする側からpropsで渡してそれを設定するという方法も学んだ.

propsは本来受け取り側で変更できないものだけど、それをStateの関数内に退避させることで変更できることを知った✏️

拙いけど終わり … !