State란?

• 동적으로 변하는 값

import React, {useState} from "react";

• useState 를 import 해준다

    return <div>
            <button onClick={increase}>+1</button>
            <button onClick={decrease}>-1</button>
            <p>{num}</p>
        </div>

• +1을 클릭하면 숫자가 올라가고 -1을 클릭하면 숫자가 내려간다

const Counter = () => {
    const [num, setNumber] = useState(0);
    
     // num = useState(0)의 기본값 변수
    // const num = 0; 이라고 선언한 것
    // num 값을 셋팅할 수 있는 setter함수

• React에서 값을 동적으로 활용하려면 useState를 활용한다
• num은 기본값을 담은 변수이고 setNumber는 유동적인 값을 가지고 있는 변수이다.

import React, {useState} from "react";

const Counter = () => {
    const [num, setNumber] = useState(0);

    const increase = () => {
        setNumber(num + 1) // 기본값 0에 1을 더한다
                           //useState를 통해 상태 관리
    }

    const decrease = () =>{
        setNumber(num - 1)
    }

    // num = useState(0)의 기본값 변수
    // const num = 0; 이라고 선언한 것
    // num 값을 셋팅할 수 있는 setter함수
    return <div>
            <button onClick={increase}>+1</button>
            <button onClick={decrease}>-1</button>
            <p>{num}</p>
        </div>
}
export default Counter;