render 함수에서 현재 state를 조회할 때는 this.state를 조회하면 됩니다. 그리고 button 안에 onClick이라는 값을 props로 넣어 주었는데, 이는 버튼이 클릭될 때 호출시킬 함수를 설정할 수 있게 해 줍니다. 이를 이벤트를 설정한다고 하는데요. 리액트의 이벤트 시스템은 4장에서 더 자세히 알아보겠습니다.

이벤트로 설정할 함수를 넣어 줄 때는 화살표 함수 문법을 사용하여 넣어 주어야 합니다. 함수 내부에서는 this.setState라는 함수를 사용했는데요. 이 함수가 state 값을 바꿀 수 있게 해 줍니다.

코드를 다 작성했으면 Counter 컴포넌트를 App에서 불러와 렌더링하세요. 기존 MyComponent 는 이제 필요 없으니 없애 주겠습니다.

App.js

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

---