react 리캡챠 오류시 초기화 하기 (react-google-recaptcha 사용)

문제상황

1. 폼 데이터 전체를 작성한 후 마지막에 리캡챠 검사 => 리캡챠 토큰을 폼 데이터에 같이 실어 서버 보낸다.

2. 이때 서버에서 모종의 이유로 오류가 나면, 리캡챠가 체크된 채로 남아있어 재시도를 진행할 수 없다.

- 리캡챠 유효시간 만료, 로봇으로 판단 등 리캡챠 자체에서 만료시킨 경우는 재시도가 가능하다.

3. 이미 검증된 토큰은 재사용할 수 없어, 서버에서 리캡챠 오류가 발생한다.

위와 같은 특정 상황에서 리캡챠 토큰이 유효하지 않다고 판단되었을때 재시도 할 수 있게 만들어야 한다.

 

해결방법

*react-google-recaptcha, formik(form 라이브러리) 사용중

 

우선 useRef를 사용해 리캡챠 선택한다. 

/**리캡챠 설정 */
const recaptchaRef = useRef();

 <ReCAPTCHA sitekey={process.env.REACT_APP_RECAPTCHA_KEY} onChange={(e) => handleRecaptcha(e, setFieldValue)} ref={recaptchaRef} />

폼 데이터를 보내는 구간에서 서버에서 에러 발생시 리캡챠를 초기화 해준다.

 /**데이터 전송 */
  const handleSubmit = (value, { setFieldValue }) => {
    const formData = new FormData();
    formData.append("data", value);

    axios
      .post("/api/account/****", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((response) => {
        //성공
      })
      .catch((err) => {
      	//실패, 에러 발생!!!
        //리캡챠 초기화
        recaptchaRef.current.reset();
        setFieldValue("recaptcha", ""); //form에 담긴 값도 초기화
      });
  };

 

이러면 에러 발생시 리캡챠가 초기화되어 재시도 할 수 있다.