useState 비동기 문제 - useEffect로 해결하기 + Email Format/Validation Check 코드

input으로 이메일 입력 받고 check 버튼을 눌러서 형식 체크를 하려는게 내가 짜려는 코드의 목적이었다. 그런데 자꾸 버튼을 누르면 첫번째 클릭은 무시되고 두번째 부터 정상적으로 작동하는 문제가 있었다. 왜 그런지 콘솔창에 찍어보니, 입력값이 들어올때마다 useState로 넣어놓고 있었는데 이게 원래의 입력값보다 한박자씩 늦게 useState 변수에 들어가면서 자연스럽게 이메일 형식 체크 이벤트도 하나씩 늦는 것이었다. 그 전에도 버튼 click 이벤트 등을 통해 useState 값을 변경하고 반영하는 코드가 있으면 항상 클릭 한번씩 반응이 느리곤 했었는데 그 이유를 알아냈다. 바로 useState의 비동기 문제 때문이었다. useState를 통한 변수 상태 변경은 비동기식으로 이루어지기 때문에 내..
프로그래밍/React 2022. 3. 2. 23:28
1