[React Native] 이메일 인증번호 타이머 및 컴포넌트 구현

오늘은 이메일 인증번호 컴포넌트 및 타이머를 구현할 것이다.

 

[React Native] 회원 가입 시 이메일 유효성 검사 및 검증 여부에 따른 메세지 보여주기

위 링크에서처럼 이메일 유효성 검증과 중복확인이 끝나면 이메일 인증 컴포넌트가 나타나도록 구현해 보겠다.

1. 인증번호 확인 및 메세지 저장을 위한 state를 작성한다.

//text input이 눌렸는지
const [verifyIsPress, setVerifyIsPress] = useState(false);
//입력값 저장
const [verifyNum, setVerifyNum] = useState('');
//상태에 따른 메시지
const [verifyMessage, setVerifyMessage] = useState('');
//이메일 중복 여부 완료 시 인증번호 입력 칸을 뛰게하기 위함
const [isEmailVerifyReady, setIsEmailVerifyReady] = useState(false);
//인증번호 인증 여부
const [isVerfiyCheck, setIsVerfityCheck] = useState(false);
//인증버튼이 눌려야 인풋 뷰의 색깔이 바뀌도록
const [isVerifyBtn, setIsVerifyBtn] = useState(false);

 

2. 사용자가 입력한 인증번호를 저장하며 인증번호를  확인하는 함수를 작성한다.

const onChangeVerifyNum = (text) => {
    setVerifyNum(text);
    };

    const CheckVerifynum = () => {
    setIsVerifyBtn(true);
    if (TestNum == verifyNum) {
      setVerifyMessage('인증이 완료되었어요.');
      setIsVerfityCheck(true);
    } else {
      setVerifyMessage('인증번호가 일치하지 않아요. 다시 한 번 확인해주세요.');
      setIsVerfityCheck(false);
    }
};

 

이 전의 글을 보지 않았다면 메세지를 왜 저장하는지 모를 수 있다. 메세지를 저장하는 이유는 인증번호 확인 여부에 따라 사용자에게 인증 여부를 알려주기 위함이다.

 

여기서 TestNum을 사용하는 이유는 아직 백엔드와의 연동이 되지 않았기 때문에 목데이터를 만들어서 인증이 되는지 테스트하기 위함이다.

3. 작성한 함수를 input에 적용한다.

<VerifyInput
	  //입력 필드의 힌트
      placeholder="인증번호 입력"
      //힌트 색상
      placeholderTextColor="#ced4da"
      //자동 교정 기능 비활성화
      autoCorrect={false}
      //맞춤법 기능 비활성화
      spellCheck={false}
      value={verifyNum}
      //인증이 완료시 인증번호 입력 칸 비활성화 
      editable={isVerfiyCheck ? false : true}
      //작성한 함수 사용 
      onChangeText={onChangeVerifyNum}
      //입력 필드에 포커스 될때 호출하는 함수
      onFocus={() => {
        setVerifyIsPress(true);
      }}
      //입력 필드에 아웃포커스 될때 호출하는 함수
      onBlur={() => {
        setVerifyIsPress(false);
      }}>
  </VerifyInput>

 

4. 이제 아래 사진과 같이 인증번호 입력 타이머를 구현하겠다.

//타이머 시간 설정을 위한 state
const [timer, setTimer] = useState(299);
//타이머
const formatTime = () => {
    const minutes = Math.floor(timer / 60);
    const seconds = timer % 60;
	return `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
};

useEffect(() => {
    let interval: NodeJS.Timeout;
    if (finalEmailCheck) {
      interval = setInterval(() => {
        setTimer((prevTimer) => {
          if (prevTimer <= 1) {
            clearInterval(interval);

            return 0;
          }
          return prevTimer - 1;
        });
      }, 1000);
}

 

나는 타이머의 시간을 5분으로 설정하기 위해 timer의 default 값을 299로 지정했다.

 

timer state와 formatTime함수에 대한 설명은 넘어가고 useEffect에 대해서 설명하겠다.

useEffect 훅은 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있도록 해준다. 여기서는 finalEmailCheck 값이 변경되면 특정 작업을 수행하기 시작한다. 여기서 특정 작업이라 하면 당연히 사전에 설정한 시간의 감소를 의미한다. 

 

let interval : NodeJs.Timeout은 타이머의 식별자를 지정한다.

만약 이메일 인증 완료(finalEmailCheck)가 true이면 if문 안의 코드가 실행된다. 

setInterval : 1초마다 한 번씩 실행되는 타이머를 설정한다. 이 타이머는 setTimer 함수를 호출하여 이전 타이머 값에서 1씩 빼고 0이 될 때 clearInterval을 호출하여 타이머를 멈추며 타이머 값을 0으로 설정하는 것이다.

 

간단히 말하면 이 코드는 finalEmailCheck(이메일 인증 완료의 boolean) 값이 변경되면 실행되며 finalEmailCheck 값이 true일 때 1초마다 타이머를 업데이트하는 것이다.

 

5. 위에서 구현한 타이머를 적용시킨다.

<Timer>{formatTime()}</Timer>

짠! 아주 간단하다. 그냥 {formatTime()}을 Text 태그 안에 적용시켜주기만 하면 된다.

참고로 나는 styled-component를 사용하고 있어 Text가 아닌 Timer로 감쌌다.

 

 

이제 이메일 중복 확인이 된 경우에 이메일 인증 컴포넌트가 렌더링 되도록 해보겠다. 방법은 아주 간단하다.

 

6. 이메일 중복 확인 완료 시 인증번호 입력 컴포넌트가 나타나도록!

{isEmailVerifyReady && (
    <>
      //================여기는 일단 무시하도록 하자==================
      <HiddenView>
        <EmailVerifyTitle>이메일 인증하기</EmailVerifyTitle>
        {isVerfiyCheck && (
          <>
            <HiddenCheck source={notError} />
            <HiddenTitle>인증 완료</HiddenTitle>
          </>
        )}
      </HiddenView>
      //================여기까지 무시하도록 하자==================
      {!isVerfiyCheck ? (
        <>
          <EmailVerifyDetailTitle>
            입려하신 이메일로 발송된 인증번호를 입력해주세요.
          </EmailVerifyDetailTitle>
          <VerifyInputView
            style={{
              borderBottomColor: isVerfiyCheck
                ? `${MAIN_COLOR}`
                : !isVerfiyCheck && verifyNum.length >= 0 && isVerifyBtn
                  ? `${ERROR_COLOR}`
                  : `${GREY_COLOR}`,
            }}
          >
            <VerifyInput
              placeholder="인증번호 입력"
              placeholderTextColor="#ced4da"
              autoCorrect={false}
              spellCheck={false}
              value={verifyNum}
              editable={isVerfiyCheck ? false : true}
              onChangeText={onChangeVerifyNum}
              onFocus={() => {
                setVerifyIsPress(true);
              }}
              onBlur={() => {
                setVerifyIsPress(false);
              }}
            ></VerifyInput>
            <Timer>{formatTime()}</Timer>

            <VerifyBtn
              onPress={CheckVerifynum}
              disabled={verifyNum.length === 4 ? false : true}
              style={{
                backgroundColor:
                  // 인증번호 길이는 임시로 4로 지정
                  verifyIsPress && verifyNum.length === 4
                    ? `${MAIN_COLOR}`
                    : `${GREY_COLOR}`,
              }}
            >
              <VerifyTitle>인증하기</VerifyTitle>
            </VerifyBtn>
          </VerifyInputView>
          <MessageView>
            {isVerfiyCheck ? <ErrorImage source={notError} /> : null}
            {!isVerfiyCheck && isVerifyBtn && verifyNum.length >= 0 ? (
              <ErrorImage source={Error} />
            ) : null}

            <Message
              style={{
                color: isVerfiyCheck
                  ? `${MAIN_COLOR}`
                  : `${ERROR_COLOR}`,
              }}
            >
              {email.length >= 1 ? verifyMessage : null}
            </Message>
          </MessageView>
        </>
      ) : null}
</>

IsEmailVerifyReady는 이메일 중복 확인 완료 여부를 저장하기 위해 작성한 state이다. 즉 만약 이메일 중복 확인이 완료되면 Fragment (<></>)속 컴포넌트들이 렌더링 되는 것이다. 정말 간단하다. state를 작성하고 해당 state를 사용하면 특정 작업 값에 따라 컴포넌트의 렌더링 여부를 결정할 수 있다.

 

위 코드의 내용들은 이전 게시글과 중복되는 내용이 많으며 state를 활용한 내용이 많기 때문에 설명을 생략하겠다. 

위 코드까지의 상황

 

7. 위에서 넘어간 Hidden View에 대해서

나는 이메일을 통한 인증이 완료될 때 아래와 같이 인증 컴포넌트가 사라지길 원했다.

따라서 사전에 작성한 isVerifyCheck(이메일 인증 여부) 값이 true이면 인증 컴포넌트가 사라지고 인증 완료 여부만 나타나도록 구현한 것이다. 그리고 HiddenView 아래의 코드 즉 인증 컴포넌트는 isVerifyCheck(이메일 인증 여부) 값이 false일 때만 렌더링 되도록 구현하였다.

사실 이런 화면에 대해서는 JS에 대해서 어느 정도 지식이 있다면 누구나 만들 수 있다 생각한다. 하지만 개발을 처음 접해보는 사람들이 어려움을 겪고 방향을 찾지 못할 때 내가 작성한 코드들을 참고하여 개발의 어려움을 느끼지 않길 원했다.

 

이상이다.