混同反応を用いた概念2-state hook(TIL#02)

stateって何?

useStateの使用

import React, { useState } from 'react';

const Counting = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>버튼을 {count}번 클릭하셨습니다.</p>
            <button onClick={() => setCount(count + 1)}>
                클릭하기
            </button>
        </div>
    );
}

export default Counting;

userState関数を呼び出すと、2つの要素を含む配列が返されます.1つ目の要素は現在のステータス(state)、2つ目の要素はステータスを変更するためのセットアップ関数です.

stateの使用上の注意

import React, { useState } from 'react';

const Counting = () => {
    const [countInfo, setCountInfo] = useState({count: 0, odd: false});

    return (
        <div>
            <p>버튼을 {countInfo.count}번({countInfo.odd ? '홀' : '짝'}) 클릭하셨습니다.</p>
            <button onClick={() => setCountInfo({
                ...countInfo,
                count: countInfo.count + 1,
                odd: !countInfo.odd,
                })}>
                클릭하기
            </button>
        </div>
    );
}

export default Counting;

{
    ...countInfo,
    count: countInfo.count + 1,
    odd: !countInfo.odd,
}