React - state 변경함수를 사용할 때 주의점

async 함수

async 함수는 기본적으로 실행이 완료되는 것을 기다리지 않고 바로 다음 코드를 실행합니다.

 

ajax, 이벤트 리스너, setTimeout, state 변경함수 들이 기본적으로 asynchronous ( 비동기적 ) 하게 동작합니다.

 

이런 비동기 함수들은 실행이 완료되는 것을 기다려주지 않기 때문에 무결성이 깨지거나 의도하지 않은 방식으로 동작할 수 있습니다. ( 위에 적은 state 변경 함수보다 아래 적은 state 변경 함수가 먼저 완료되어서 의도와는 다르게 작동하는 현상 등 )

 

이런 상황을 동기적으로 순서에 맡게 처리하고 싶을 때는 useEffect 같은 훅을 사용해서 state 변동이 일어나면 실행하도록 세팅하는 방법으로 해결할 수 있습니다.