(React) State함수 #01

예를 들어서 버튼을 하나 누르면 누를 수만큼 수가 올라가는 것을 구현 해보자 한다.

import React from "react";



export default function Counter(){
    let count = 0;
    return (
        <div>
            <button onClick={()=>(count + 1)}>+1</button>
            <br />
            Counter: {count}
        </div>

    )
}

하지만 눌러도 카운트는 되지 않고 , 아무런 작동조차 하지 않는다.

흔히 함수 컴포넌트는 그냥 함수 그자체일 뿐이기 때문이다.

함수 컴포넌트에서 내부적으로 상태를 관리를 해야하는 일이 필요하다.렌더링후에는 다시 함수 자기 자신이 스스로 일을 해결할수 없다.
단순한 변수를 줘서 해결하기엔 한계가 있기에
그래서 상태값을 관리할수 있도록 만들어야한다.

즉,함수 컴포넌트에서 내부적으로 상태를 관리해야하는 일이 필요하다는 말이다.

그래서 쓰이는 함수가 useState이다
Hook 함수 중에 가장 대표적인 함수이다.

// 값,값을 변경할때 쓰는 함수
const [state,setState] = useState();

이런식으로 사용을 하면 된다.

import React,{useState} from "react";



export default function Counter(){
    const [count,setCount] = useState(0);
    return (
        <div>

            <button onClick={()=>setCount(count + 1)}>+1</button>
            <br />
            Counter: {count}
        </div>

    )
}

Usestate를 사용하고 난 뒤에 함수이다.

사용을 하고 나니 카운트가 되는 상황.