[1人 프로젝트] 다른 색깔 찾기 게임 2회차

🎉 성과

완성한 부분

1. 15초 시간제한 기능 다시 구현하기(setTimeout → setInterval)
2. 색깔 다른 사각형 클릭시 스테이지 +1, 시간 15초로 초기화, 점수 Math.pow(stage, 3) * 남은시간
3. 색깔 같은 사각형 클릭시 시간 3초 감소

 

 

---

 

 

✨ 느낀점

👍 알게 된 점

setInterval을 사용하여 15초 제한 다시 구현

useEffect 함수는 timer가 변경될때마다 실행이 되는데, 이를 통해 time함수가 실행되어 1초씩 감소하게된다. 그러나 강제로 시간을 15초로 초기화하니, time()함수가 2번이 실행되어서 15초 -> 13초 -> 11초 ... 2초씩 감소하게 되었다. 그래서 setTimeout을 버리고, setInterval을 사용하게 되었다. 근데, setInterval을 이용해 1초씩 줄어드는 것은 구현이 쉬웠지만, 0초에 setInterval을 종료시키는 것이 문제였다. 아무리 clearInterval을 실행시켜도 setInterval이 종료가 되지 않는것이었다. 하루종일 고민하고, 인터넷을 뒤져도 나오지 않아, 결국 영어권 커뮤니티를 찾아보기 시작했다. 다행히도 나와 비슷한 처지인 사람들이 많았고, 많은 답변들 중 다음의 코드를 참고하여 코드를 구현했다.

 

특이한 점은 setInterval함수를 useRef를 사용하여 활용한다는 것이다.

자세한 설명은 아래 커뮤니티에 들어가면 확인 할 수 있다.

How to stop setInterval inside useEffect hook when certain value is reached? [React]