[React] useState의 setState는 비동기로 동작한다.

개인 프로젝트 

• 개인 프로젝트 HODU샵을 진행하던 중 유효성검사 부분에서 input값이 1개씩 밀리는 현상이 나왔다.

• 회원가입 input값들을 저장하고 있는 values 객체생성

• values에서 구조분해할당한 username, password를 유효성검사 로직에 넣어주고

• 이런식으로 onChange를 감지하며 변경해 주었는데 문제는 유효성 test 정규표현식을 만든 변수에 직접 state값을 넣으니 발생한 문제였다.
• 원인은 onChange함수에 if문으로 userNameRegExp, passwordRegExp 를 넣을때의 state는 setState로 변경되지 않은 값이 적용되기 때문이고 이건 setState가 비동기로 작동하기 때문이다.

해결

• target과 targetName을 매개변수로 받는 isValids 함수를 만들어 state의 값이 아닌 event 객체의 value와 name을 직접적으로 받아서 해결.

 

- useState란?