😎state(상태)란?

✔ 계속해서 변화하는 특정 상태
✔ 상태에 따라 각각 다른 동작을 함
✔ 컴포넌트에서 계속 값이 바뀔 동적인 데이터

state 선언

const [state 저장변수, state 갱신 함수] = useState(상태초기값)

state 저장변수 : useState를 호출하면 배열을 반환하는데 배열의 0번째 요소는 현재 state 변수이다.

state 갱신함수 : 배열의 1번째요소는 이 변수를 갱신할 수 있는 함수이다.
이름 짓는법 : set+(state 저장변수)

상태초기값 : useState의 인자로 넘겨주는 값은 state의 초깃값이다.

예시1

import React, {useState} from "react";
//state는 react의 기능이기에 임포트해야한다.

const Counter = () =>{

    // 0에서 출발
    // 1씩 증가하고
    // 1씩 감소하는 
    // count 상태

    const [count, setCount] = useState(0)

    //1씩 증가하는 함수
    const onIncrease =() =>{
        setCount(count +1)
        //버튼을 누르면 현재값에서 1씩 증가한다.
    }

    const onDecrease = () =>{
        setCount(count -1)
        //버튼을 누르면 현재값에서 1씩 감소한다.
    }

    return (
        <div>
            <h2>{count }</h2>
            {/* button을 누루면 h2의 값이 증감해야한다. state값이다.  */}
            <button onClick = {onIncrease}>+</button>
            {/* 버튼이 눌렸을때 onIncrease함수 실행 */}
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Counter;

컴퍼넌트는 자신이 가진 State가 변화하면 화면을 다시 그려 리랜더를 한다
즉, 함수가 다시 호출된다.(먼솔...)