1.stateについて

状態は동적인 객체であった.

コンポーネントは、動的であるコンポーネントのデータを格納する空間を有する.これをstate(ステータス値)と呼びます.

異なる点は、

props(関数パラメータのように)が要素に渡され、ステータス(関数で宣言された変数のように)が要素で管理されることです.

React Hooksが着席する前に、
「classベースのクラス構成部品」を使用する必要があります.
React Hooksの出現により함수형 컴포넌트もStateを管理できるようになった.useStateは、典型的な状態値管理関数である.

const [state 값을 저장할 변수, state를 변경해주는 함수] = useState(초기값)

の形式で使えばいいです.

2.usStateについて

import React, { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);
    const onClick = () => setCount((prev) => prev + 1);
    console.log("Rendered");

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={onClick}>Click Me !</button>
        </div>
    );
}

export default Counter;

上のコードを見てください.
countはcountの状態です.
setCountを使用してcountを管理できます.
onClick()ボタンを使用するたびにcount値が1増加します.
また、USStateの特性状態が変化するたびにカウンタ素子がレンダリングされます.
レンダリングするたびにコンソールが表示されます.ログ実行.

実行結果からcountは6であり,「Redured」も6回出力されていることがわかる.

3.useEffectについて

ステータスを管理する場合はusState()を使用できます.

usState()を使用すると、ステータスが変わるたびに構成部品がレンダリングされます.

の最初のマウント時にのみ実行され、再レンダリング時に実行したくない関数がある可能性があります.たとえば、APIの関数を呼び出します.

上記の場合、useEffectを使用することが望ましい.

import React, { useState, useEffect} from "react";

function Counter() {
    const [count, setCount] = useState(0);
    const onClick = () => setCount((prev) => prev + 1);
    console.log("I Render all the time.");
    const useUseEffect = () => {
        console.log("I Render only once.");
    };

    useEffect(useUseEffect, []);
    
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={onClick}>Click Me !</button>
        </div>
    );
}

export default Counter;

上のコードと結果を見てください.
useEffect()のconsoleに入れます.logは、最初のレンダリング時にのみ実行されることがわかります.
useEffectの使い方は以下の通りです.

useEffect(대상이 될 함수, 의존성 배열);

依存性の配列は、作業方法を変更します.
まず、空の配列のままにしておくと、最初のレンダリング時にのみ実行されることに注意してください.