React - useState를 이용하여 카운터 만들기

리액트 state에 대하여 알아보려고 합니다.

 

리액트 컴포넌트를 생성하고 난 뒤에는

state 값이 변경되면 다시 렌더링 됩니다.

 

상태가 변경되면 자동으로 다시 컴포넌트를 렌더링 되기 때문에

상태 변경만 해주면 됩니다.

 

1.  useState 초기화

const [counter, setCounter] = React.useState(0);

먼저 useState 함수를 이용하여서 초기화를 합니다.

useState 안에 들어간 0은 초기화할 때 사용하는 값입니다.

 

2. 각 버튼 클릭 이벤트에서 setCounter를 이용하여 상태 값을 변경합니다.

setCounter 파라미터를 callback 함수로 작성하였는데, 

이전의 counter를 가지고 와서 1을 더해주는 방식입니다.

setCounter(counter => counter + 1);

 

아래 코드펜의 예시 코드입니다.

See the Pen Untitled by Young Jun Koo (@YoungJu-Ku) on CodePen.