useState

• useState란 함수형 컴포넌트에서 상태관리를 위해 사용되는 Hook이다.
• 첫번째 원소는 현재 상태(test), 두번째 원소는 Setter 함수(setTest)이다.
• Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정한다.

import React, { useState } from "react";

function Test() {
    // test라는 변수를 생성하고 초기값을 0으로 할당한다.
    const [test, setTest] = useState(0);

    function countUp() {
        // test의 값을 갱신한다.
        setTest(test + 1);
    }

    // 화살표 함수를 사용할 수도 있다.
    // const countUp = () => {
    //     setTest(test + 1);
    // }

    return(
        <>
        <h1>{test}</h1>
        <button onClick={countUp}>click me!</button>
        </>
    )

}

export default Test;

✨ 참고
https://react.vlpt.us/basic/07-useState.html

useEffect

• 컴포넌트의 랜더링 이후 useEffect 함수를 실행함
• 첫 랜더링 시에만 useEffect를 실행싶다면 빈배열 []을 사용한다.

function Test() {
    const [test, setTest] = useState(0);

    const countUp = () => {
        setTest(test + 1);
    }

    useEffect(() => {
        console.log(test)
        // test가 변경되었을 때만 useEffet를 실행
    }, [test]);
    console.log('rendering');

    return(
        <>
        <h1>{test}</h1>
        <button onClick={countUp}>click me!</button>
        </>
    )
}

// rendering
// 0
// rendering
// 1
// rendering
// 2