개인프로젝트[항해캡슐(Timer)]

서버측에서 인증번호의 유효시간을 3분으로 정하긴 하겠지만 프론트에서도 명시해주기위해 3분타이머를 생각했고

 

인증완료를 할때 3분내로 인증번호를 입력하지 못하면 버튼이 비활성화되도록 하며 3분타이머를 만드는걸 했다.

 

timeLeft 상태값은 타이머의 남은 시간을 저장하는 변수입니다.

초기값은 initialTime으로 전달된 값으로 설정됩니다.

tick 메소드는 timeLeft 상태값을 1초씩 감소시키는 함수입니다. setInterval 메소드를 사용하여 1초마다 tick 함수가 호출되며,

timeLeft 상태값이 변경됩니다. 타이머가 종료되면 clearInterval 메소드를 사용하여 타이머를 중지합니다. 이를 위해 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 setInterval 함수를 호출하고,

언마운트될 때 clearInterval 함수를 호출합니다.

이렇게 하면, 컴포넌트가 마운트될 때 타이머가 시작되고, 컴포넌트가 언마운트될 때 타이머가 중지된다.

const tick = () => {
    setTimeLeft(timeLeft - 1 <= 0 ? 0 : timeLeft - 1);
  };

tick → timeLeft상태값을 1초씩 감소시켜서 0보다 크거나 같아지면

timeLeft 값이 0이 되면 useEffect 훅에서 반환하는 함수가 호출되면서 타이머가 중지됩니다.

**initialTime**은 Timer 컴포넌트가 받는 props 중 하나로, 타이머의 초기값을 설정하는 역할을 합니다. useState 훅을 사용하여 상태를 관리할 때, 상태의 초기값을 설정할 수 있는데, 이때 initialTime 값을 사용합니다.

예를 들어, initialTime 값을 **180**으로 설정하면, timeLeft 상태의 초기값도 **180**이 되며, 이 값은 3분을 의미합니다. 타이머가 시작되면 timeLeft 값이 1초씩 감소하며, **0**이 되면 타이머가 종료됩니다.

따라서, initialTime 값은 Timer 컴포넌트를 사용하는 쪽에서 설정하며, 타이머의 초기값을 결정합니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

const [timeLeft, setTimeLeft] = useState(initialTime);

ex)

import Timer from './Timer';

function App() {
  return (
    <div>
      <Timer initialTime={180} />
    </div>
  );
}

 

이렇게 3분 타이머를 완성시키긴 했으나 0초에 멈추지 않고 -로 계속 숫자가 카운트 됬고 타이머가 돌아가는 함수에 조건문으로 

<=0 을 추가해서 0까지만 딱 작동하도록 완성했다.

 

  const tick = () => {
    setTimeLeft((timeLeft) => {
      if (timeLeft - 1 <= 0) {
        setIsTimeOver(true);
        return 0;
      } else {
        return timeLeft - 1;
      }
    });
  };

 

타이머는 완성을 하고나서 0초가되면 더이상 그번호로는 인증을 할 수 없게 버튼을 비활성화 하고 새로운 인증번호를 재발송하면 다시 3분동안 버튼이 활성화 되도록 하려고 진짜 유튜브도 보고 chatGPT랑 같이 코드도 짜보고 수정하고 했는데 결국 실패했다..

결국 규식매니저님께 도움을 요청했고 0초가되었는지 확인하는건 자식컴포넌트가 부모컴포넌트에게 전달할 수 는 없고 부모에서 자식으로 프롭으로 전달해서 확인이 가능한걸 알게됬다.

 

또 setTimeOver을 자식요소에 프롭으로 보내줬으면 Timer이라는 자식컴포넌트를 불러올때 거기에 프롭으로 같이 받아와야하는걸 알게됬다.

 

이렇게 하니까 딱 ! 정상 작동을했다.. 유레카..

역시 매니저님..믿고있었다구..

 

얼른 서버 완성되서 연결시켜보고싶다. 나.. 완성할 수 있겟지..!?