useState는 코드 상단에서 import 구문을 통해 불러오고, 다음과 같이 사용합니다.

const [value, setValue] = useState(0);

useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 현재 0을 넣어 주었는데, 결국 카운터의 기본값을 0으로 설정하겠다는 의미입니다. 이 함수가 호출되면 배열을 반환하는데요. 그 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수입니다. 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링됩니다.

코드를 이해하고 다 작성했다면, App 컴포넌트를 열어서 기존에 보여 주던 내용을 다 지우고 Counter 컴포넌트를 렌더링하세요.

App.js

import React from 'react';
import Counter from './Counter';
 
const App = () => {
  return <Counter />;
};
export default App;

---