const onSubmit = async e => {
e.preventDefault();
try {
await login(id, password);
await getMyInfo();
dispatch(setModalDefault());
dispatch(setLoginTryCount(0));
} catch (error) {
if (error.response.status >= 400 && error.response.status < 500) {
★★★★★★★★★★★★★★★★★★★★
flushSync(() => {
set로그인피드백(false);
});
flushSync(() => {
set로그인피드백(true);
});
★★★★★★★★★★★★★★★★★★★★
setErrorMsg(error.response.data.message);
dispatch(setLoginTryCount(loginTryCount + 1));
if (loginTryCount > reCaptchaShowCount) {
window.grecaptcha.reset();
}
setCaptchaChecked(false);
} else if (error.response.status >= 500) {
setErrorMsg('서버 오류입니다. 관리자에게 문의하십시오.');
}
}
};
<small className={`login-error ${로그인피드백 ? 'login-error-feedback' : ''}`}>{errorMsg}</small>
로그인에 실패하게 되면 로그인피드백이 false에서 true로 바뀌면서
<small> 태그에 붙은 'login-error-feedback'가 뗐다가 다시 붙여지게 하고 싶었습니다.
선생님한테 배운대로 아래 코드처럼 setTimeout으로 동기(?)처리를 하면 작동은 잘됩니다.
set로그인피드백(false);
setTimeout(() => {
set로그인피드백(true);
});
그치만 강의 끄트머리에 있었던 flushsync라는 기능이 생각나 써먹으려고 해봤는데 작동이 잘 안되는군요.
혹시 놓친게 있을까요?
