setState() 비동기 문제해결

리액트에서는 useState hook을 사용하여 간편하게 상태관리를 할 수 있다. 하지만 상태를 변경하는 setState() 함수를 사용하다보면 직면하는 문제가 있는데, setState() 함수가 내가 원하는대로 동작하지 않는다는 것이였다.  

 

상황) 사용자가 TodoList Item의 checkBox를 클릭하면, 서버에 TodoItem을 수정하는 PutTodo요청을 보내야 한다.

Todolist

check 상태를 관리하는 useState

Input의 onChage Handler

사용자가 checkbox Input을 클릭하면 setChecked로 상태를 변경하고, putTodo에 변경된 checked 상태를 담아서 요청을 보냈다. 

예상한 흐름  = 클릭 ->  상태변경  -> 서버요청

그런데 이상하게 새로고침하면 상태가 이전으로 돌아가 있었다.

무슨일인가 싶어서 네트워크 탭을 보니 putTodo요청에는 setState 함수가 실행되기 이전의 상태 (클릭하기 전 상태)가 들어가 있었다.??

상태 변경이 안되었나 싶어서 checked 상태를 console.log로 확인해보니 상태는 정상적으로 변경되어 있었다. (setState 함수는 정상적으로 작동)

 

왜그런걸까? 

바로 setState 함수가 비동기적으로 동작하기 때문이다.

setState함수는 비동기적으로 동작한다. 그렇기 때문에 실제로는 아래처럼 동작하였다.

실행된 흐름 = 클릭 ->  서버요청  ->  상태변경  

이는 사실 처음 리액트를 배우고 useState hook을 사용하면서 자주하는 실수였다. 

화면에서의 랜더링 문제라면 콜백함수 {()=>{setState()}로 만들어 즉각적으로 화면에 반영되게 만들어줄수도 있지만,

위의 상황처럼 상태를 변경하고, 이후에 연속적으로 로직을 처리해야 하는 상황에서 setState의 한박자 늦는 상태변경은 엉뚱한 요청을 보내게 되는 결과를 만들었다. 

 

그럼 어떻게 문제를 해결할 수 있을까? 

수정 후 onChange handler

 

생각을 바꿔서 useState의 상태를 서버에 보내는 대신에,  isChecked라는 변수를 만들어서 변경될 상태값을 담고 이를 서버에 요청하여 문제를 해결했다. 간단한 로직 변경으로 서버에는 원하는 상태값을 보내줄 수 있었고, 결과는 예상한 대로 잘 동작했다. 

생각보다 자주 있는 상황이고 간단한 문제이지만, setState가 비동기적으로 작동한다는 사실을 모르면 꽤나 헤멜수 있는 문제였다. 

 

**혹시 잘못된 정보가 있다면 댓글로 알려주시면 감사하겠습니다🫡 **