useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 3장에서도 이미 사용해 보았는데, 이번 장에서 다시 복습해 봅시다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다.

useState 기능을 사용해서 숫자 카운터를 구현해 보겠습니다. src 디렉터리에 Counter.js 파일을 생성하고 다음 코드를 입력해 보세요.

Counter.js

import React, { useState } from 'react';
 
const Counter = () => {
  const [value, setValue] = useState(0);
 
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b>입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};
 
export default Counter;

---