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

Question

현재 이메일 중복 체크를 구현 하고 있습니다. 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라는 액션을 하나 만들어서 정규식에 통과하지 못할 때 마다 호출하여 값을 초기화 하는 방법을 생각하고 있는데, 괜찮은지 궁금합니다.

제로초(조현영) · Answer

네 그렇게 액션 하나를 만들어서 수정해야 합니다.