【React】State

コンポーネントが持っている状態を管理する

App.jsx

import ( useState ) from 'react'; // stateを定義。Reactが用意しているuseStateというフックを使う
import ( Message ) from './components/Message';

export const App = () => {
    // useStateを配列の分割代入で受け取る。
    // 1つ目の引数でステイトを受け取る。ステイトを自由に設定
    // 2つ目の引数には更新関数を受け取る。setステイト名にするのが慣習
    const [num, setNum] = useState(0); // ()内にステイトの初期値を設定。useStateは、関数コンポーネント階層の一番上でしか読み込めない
    const onClickCount = () => {
        // setNum(123); // 更新関数では()の中でステイトを更新する
        // setNum(num + 1); // ボタン押下する度に+1される
        setNum((prev) => prev + 1); // 関数を設定することもできる
    };
    return (
        <>
            <Message color='orange'>How's it going?</ Message> // タグで囲んでpropsを渡す
            <Message color='green'>Pretty good!</ Message>
            <button onClick={onClickCount}>カウントアップ</button>
            <p>{num}</p> // ステイト名で初期値が反映される
        </>
    );
};