useState는 비동기이다. 이를 동기적으로 처리하는 방법

회원가입 창에서 패스워드 중복검사를 구현하던중 문제가 생겼다. 해결하는데 3시간도 더걸린거 같다 ㅠㅠㅜ

 

분명히 input에서 onChange를 이용해서 event.target.value를 받아 오는 것 까지는 콘솔창에 제대로 찍히는데,

이를 스테이트에 넣으면 제대로 업데이트가 안되는 것이었다.

콘솔로 찍어보니 password나 passwordConfirm에 어떤값을 넣더라도 첫번째로는 빈스트링이 출력이 되어서 제대로 비밀번호와 비밀번호확인이 일치하는지 검사가 안되는 것이었따...검색을 해보니 useState에 콜백을 주라고 해서 줘봤지만 여전히 무용지물....

 

원인을 찾아보니 setState로 업데이트를 하더라도 그 값이 업데이트 되는 것은 동기적으로 되지 않고 비동기적으로 된다고 한다!!

무슨말인고 하니 handleinput 내에 있는 setUserReginfo()에서 state를 업데이트를 하고 바로 밑에 if절로 password나 passwordConfirm으로 확인을 하고 그다음에 passwordCheck()함수를 실행하도록 로직을 짰는데,

이게 동기적(즉 위에서 부터 차례대로 실행)으로 작동하지 않고, setUserReginfo()가 시간이 좀 더 걸리는 작업이다 보니 이게 완료되기 전에 밑에 passwordCheck()함수를 실행시킨 것이다.

 

passwordCheck()에서는 userRegInfo라는 state값을 가져오는데 이건 업데이트가 되기 전의 값..

 

즉 이 코드 순서를 동기적으로 다시 조정 해줄 필요성이 있었다.

ㅎ

처음에 생각한것은 promise와 async였지만 뭔가 코드가 꼬이고 잘 해결이 안되어서 검색을 하던중에 useEffect로 비슷한 문제를 해결하는 것을 발견.

 

이번에도 useEffect를 쓰면 해결이 되는 문제였다...사실 개념은 간단해서 이걸로 해결이 되나 싶었는데 되더라...역시 개념을 아는것과 실제로 다양한 상황에서 적용을 하는건 전혀 다른 문제임을 깨달았다.

 

handleInput내에서 setUserRegInfo()로 state를 업데이트 해주고, useEffect는 컴포넌트가 렌더링 될 때 한번 실행되고, 그 후 state가 업데이트 되었으므로(의존성배열 [userRegInfo]) 다시한번 passwordCheck()를 실행시켜 주는 방식으로 해결했다.

 

 

 

감사합니다 코딩애플님 이글보고 해결했습니다

https://codingapple.com/unit/react-setstate-async-problems/