👨‍💻 사건

• 코드를 해석하거나, 방향성이 정해져있는경우에는 useState 사용이 자유로웠으나, 막상 무의 상태에서 useState를 사용하려니 머뭇한 나를 보았다.

✅ 해결

일단 그냥 아무거나 사용해보자.

export default function Counter() {
    const [num, setNum] = useState(0); // [변화하는 값, 변화를 만들어주는 함수] = useState(초기값)

    const increaseNum = () => { // 화살표 함수를 통해, setNum이라는 함수를 지정하여 사용
        setNum((prevnum) => prevnum + 1);
    };
    const decreaseNum = () => {
        setNum((prevnum) => prevnum - 1);
    };
    return (
        <>
            <p>{num}</p>
            <button onClick={increaseNum}>Plus</button> // 클릭이 되면 increaseNum 을 작동시킨다.
            <button onClick={decreaseNum}>Minus</button>
        </>
    );
}

💭 개선

천천히 하나씩 직접 아무 코드가 없는 곳에서 작동시켜보자