useState로 카운터 만들기

function Count() {
    const [count, setCount] = useState(0);
    
    function add() {
    	setCount(count + 1);
    }
    
    function sub() {
    	setCount(count - 1);
    }
    
    return (
    	<>
          <button onClick={add}>+</button>
          {count}
          <button onClick={sub}>-</button>
        </>
    )
}

위 코드는 useState를 사용한 간단한 counter입니다.

• useState의 인자는 초기값을 넣으면 됩니다.
• useState를 받는 변수는 배열의 형식이어야 하고 앞은 state로 사용할 변수명을, 뒤는 그 변수의 setter를 선언합니다. (count의 setter라 setCount라 함수명을 선언하였지만 potato, tomato 등 원하는 함수명을 넣어줘도 상관 X)
• setCount의 인자로는 새로이 변경할 값을 넣어줍니다.
• 최종적으로는 +나 - 버튼을 누를 때마다 setCount를 통해 count의 값이 변경되고 count가 변경될 때마다 해당 컴포넌트가 리렌더링되면서 count의 값이 실시간으로 바뀌게 됩니다.