useState

컴포넌트에서 상태를 관리할수 있게 해주는 함수

버튼을 누를 때 숫자의 값이 오르고 내려가는 카운터를 구현해보자

import React from "react";


function Counter() {
    const onIncrease = () =>{
        console.log('+1');
    }

    const onDecrease = () => {
        console.log('-1');
    }
    return (
        <>
            <h1>0</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </>
    );
}


export default Counter;

저번에도 배웠듯이, 자바스크립트값을 jsx 내부로 렌더링 하려면 {}를 씌워야한다. 위의 구문으로는 아직 카운터가 구현되지 않았다. 다만, 버튼을 클릭하면 onIncrease 와 onDecrease가 실행되며 이때 각각 콘솔창에 1와 -1이 나오게끔만 구현했다.

이제 useSate를 이용해서 카운터를 완성해보기 전에 useState에 대해서 간단하게 알아보면
const [ a, b] = useState(c);
"a라는 상태를 만들거야, 근데 기본값은 c로 할거고, b를 이용해서 a의값을 변경할거야" 라는 뜻이다.

import React, {useState} from "react";


function Counter() {
    const [ number, setNumber] = useState(0);
    const onIncrease = () =>{
        setNumber(number + 1);
    }

    const onDecrease = () => {
        setNumber(number - 1 );
    }
    return (
        <>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </>
    );
}


export default Counter;

자. 위에서 배웠던 useState()를 복기하면서 생각해보자.
const [ number, setNumber] = useState(0);
"number상태를 만들건데 초기값은 0 이야, 그리고 setNumber를 이용해서 number의 값을 변경할거야."

onIncrease와 Ondecrease는 이 setNumber로 값을 변경하는 함수가 되었다.