React) this.setState 끝난 후 특정 작업 실행

this.setState 끝난 후 특정 작업 실행

setState는 클래스형 컴포넌트에서 state의 상태를 변경하기 위해 사용하는 함수입니다.

setState 함수를 실행시켜 state 값을 변경하는 작업을 마친 후에 특정 작업을 실행하도록 하고싶은 경우에는 setState의 두번째 파라미터로 콜백 함수를 등록하면 됩니다. 

...
<button
	onClick={() => {
    		this.setState(
            	{number: number + 1},
                () => { ... callback 함수 ...}
            );
        }
    }
>
+ 1
</button>
...

 이렇게 setState의 첫번째 파라미터로 변경할 state 상태를 전달하고, 두번째 파라미터에 setState가 끝난 이후 callback함수를 작성하여 전달하면 됩니다. 

---

References

• 리액트를 다루는 기술(김민준)