useSelector로 가져온 state 값을 변경하고 싶습니다.

현재 이메일 중복 체크를 구현 하고 있습니다.

const onChangeEmailInput = useCallback((evt) => {
setEmailInput(evt.target.value);

const regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;

if (!regExp.test(evt.target.value)) {
setEmailVerify('이메일 형식에 맞게 입력을 해주세요.');
} else {
dispatch({
type: CHECK_OVERLAP_EMAIL_REQUEST,
data: evt.target.value,
});
}
}, [emailInput, emailVerify]);

input이 변경될 때 이메일 정규식에 통과되면 중복된 이메일을 찾는 액션이 실행되고

router에서

router.get('/check_overlap_email', (req, res, next) => {
try {
const query = `SELECT email FROM TB_USER WHERE email = '${req.query.data}'`;
connection.query(query, (err, result) => {
if (err) throw err;

if (result[0]) {
res.status(200).send('exists');
} else {
res.status(200).send('available');
}
});
} catch (err) {
console.error(err);
next(err);
}
});

이런식으로 값이 있으면 exists, 없으면 available로 값을 받습니다.

받은 값으로

useEffect(() => {
console.log(checkOverLapEmailResult);
if (checkOverLapEmailResult !== null) {
if (checkOverLapEmailResult === 'exists') {
setEmailVerify('이미 가입된 이메일입니다.');
} else {
setEmailVerify(true);
}
}
}, [checkOverLapEmailResult]);

useEffect를 통해 체크를 해주는데 문제는 아래 flow일 때 문제가 됩니다.

1. 정규식 통과를 한 뒤 중복체크를 했는데 이메일이 없어서 available값을 받음.

2. 그 다음 이메일을 다 지워서 정규식을 통과하지 못해 '이메일 형식에 맞게 입력을 해주세요'가 출력.

3. 다시 정상적인 이메일을 입력후에 available값을 받음.

이 flow 대로 진행했을 때 checkOverLapEmailResult state가 available로 동일하여 useEffect에 들어오지 못하여 setEmailVerify(true); 코드가 실행이 되지 않아 emailVerify가 변경되지 않습니다.

그래서 정규식에 통과를 하지 못할 때 useSelector로 가져온 checkOverLapEmailResult state 값을 null로 초기화를하고 싶은데 어떤 방법이 효율적인지 궁금합니다.

제가 생각한거는 RESET_OVERLAP_EMAIL_STATE라는 액션을 하나 만들어서 정규식에 통과하지 못할 때 마다 호출하여 값을 초기화 하는 방법을 생각하고 있는데, 괜찮은지 궁금합니다.

인프런 커뮤니티 질문&답변