더북(TheBook)

3.4.1.4 this.setState가 끝난 후 특정 작업 실행하기

setState를 사용하여 값을 업데이트하고 난 다음에 특정 작업을 하고 싶을 때는 setState의 두 번째 파라미터로 콜백(callback) 함수를 등록하여 작업을 처리할 수 있습니다.

onClick 함수를 다음과 같이 수정해 보세요.

Counter.js - button

<button
  // onClick 통해 버튼이 클릭되었을  호출할 함수를 지정합니다.
  onClick={() => {
    this.setState(
      {
        number: number + 1
      },
      () => {
        console.log('방금 setState 호출되었습니다.');
        console.log(this.state);
      }
    );
  }}
>
  +1
</button>

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.