Reactコンポーネントの基本と状態管理

コンポーネントは、UI（ユーザーインターフェース）の一部であり、独自のロジックと外観を持つことができます。コンポーネントは互いにネストしたり、複数回再利用したりすることが可能です。

コンポーネントベースの開発により、開発者はブロックを組み立てるように、完全で大規模なアプリケーションを構築できます。

Reactコンポーネント

Reactでは、コンポーネントは大文字で始まる関数です。この関数内部にコンポーネントのロジックとビュー（UI）が含まれます。コンポーネントのレンダリングは、コンポーネントをタグのように記述するだけで行えます。


// コンポーネントの定義（大文字で始まる）
const Button = () => {
    // コンポーネントのロジック
    return <button>click me !</button>
}

function App() {
    return (
        <div className="App">
            {/* コンポーネントのレンダリング */}
            {/* 自己終了タグ */}
            <Button />
            {/* ペアタグ */}
            <Button></Button>
        </div>
    )
}

useStateフック

useStateはReact Hook（関数）であり、コンポーネントに状態変数を追加することを可能にします。これにより、コンポーネントのレンダリング結果に影響を与える値を制御できます。

本質的に、通常の変数とは異なり、状態変数が変更されるとコンポーネントのビュー（UI）もそれに追随して変更されます（データ駆動ビュー）。


const [count, setCount] = useState(0)

useStateは配列を返します。
配列の最初の要素は状態変数、2番目の要素は状態変数を変更するためのset関数です。
useStateに渡された引数は、countの初期値となります。


// useStateを使用してカウンターボタンを実装
import { useState } from "react";

function App() {
    // useStateを呼び出して状態変数 `count` を追加
    // count: 状態変数
    // setCount: 状態変数を変更するメソッド
    let [count, setCount] = useState(0);

    // この関数は以下の2つの役割を持つ
    // 1. countを引数で渡された新しい値に変更する
    // 2. 新しいcountの値でUIを再レンダリングする
    const incrementCount = () => {
        setCount(count + 1);
    }

    return (
        <div className="App">
            <button onClick={incrementCount}>{count}</button>
        </div>
    )
}

状態更新のルール

状態の不変性
Reactでは、状態は読み取り専用と見なされます。状態を直接変更するのではなく、常に新しい値で置き換えるべきです。直接状態を変更しても、ビューの更新はトリガーされません。

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

        const updateCount = () => {
            // 直接変更してもビューは更新されない
            // count++;
            // setCount(count + 1); // この書き方も状態の不変性に反する

            // 正しい更新方法
            setCount(prevCount => prevCount + 1); // 関数形式で以前の状態を参照して更新
            // または setCount(count + 1); // 前のcountの値が最新であればこれも可
        }

オブジェクト状態の更新
オブジェクト型の状態変数を更新する場合、setメソッドには常に新しいオブジェクトを渡す必要があります。

        
        // formオブジェクトを直接変更してもビューは更新されない
        let [form, setForm] = useState({ name: 'jack' });

        const handleChangeNameDirectly = () => {
            form.name = 'john'; // 元のオブジェクトを変更
            // setForm(form); // これではビューは更新されない
        }

        // 新しいオブジェクトを渡して更新（スプレッド構文を使用）
        let [form, setForm] = useState({ name: 'jack' });

        const handleChangeNameCorrectly = () => {
            setForm({
                ...form, // 既存のプロパティを展開
                name: 'john' // nameプロパティを上書き
            });
        }

コンポーネントの基本スタイル適用方法

Reactコンポーネントの基本的なスタイル制御には、主に2つの方法があります。

インラインスタイル (非推奨)

        
        <div style={{ color: "red" }}>this is div</div>

クラス名による制御 (推奨)

        
        // index.css
        .highlight {
            color: red;
            font-size: 50px;
        }

        // App.js
        import './index.css';

        function App() {
            return (
                <div className="App">
                    <span className='highlight'>これはスタイルが適用されたテキストです</span>
                </div>
            )
        }

タグ: React javascript コンポーネント useState 状態管理

6月15日 22:19 投稿

異端開発室

Reactコンポーネントの基本と状態管理