💎 개요
오랜만에 작성해보는 React velog 게시글이다!! 졸업프로젝트를 진행하게 되면서 React를 다시 사용해보는 기회가 생겼고 이에 여러 기능들을 공부하고 적용하던 도중에 저번 호두 이상형 월드컵(👉 https://velog.io/@choco1drink/React-useState%EC%99%80-useEffect)에서 적용한 useState와 useEffect를 활용하여 타이머를 구현해보도록 하였다!!
이때 setInterval을 사용하여 감소하는 초 카운트 타이머를 구현해보았다!! 따라서 setInterval이 무엇인지 어디에 유용하게 쓸 수 있을지 리뷰해보구 구현해 본 타이머를 설명하고자 한다!!
🍫 참고 자료
React 공식 문서
👉 https://ko.reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often
💎 타이머 구현하기
🍫 setInterval
setInterval은 무엇일까?? setInterval은 매 시간 동안 브라우저와 통신하는 함수이다. 따라서 일정한 시간 간격을 두고 setInterval 함수 내의 코드를 반복하게끔 할 수 있는 함수이다!! 이를 이용하게 되면 시계와 같이 매 초가 진행되는 동안에 시간이 바뀔 수 있는 화면을 구현할 수 있다. setInterval을 사용하게 되면
setInterval(() => {
코드 내용
},초수);와 같은 구조를 적용할 수 있게 되는데 이 때 초수에 해당하는 부분은 1ms에 해당하므로 만약 1초에 따른 setInterval 함수를 실행하고 싶다면 1000으로 설정하여야 한다!
따라서 이를 이용하여 타이머 예제를 확인해보고 감소하는 초수 타이머를 구현해보자!!
🍫 코드 구조 살펴보기
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>;
}먼저 공식 react 문서에서 나온 타이머 예제를 확인해보자!! 위는 useState와 useEffect를 사용하고 useEffect로 화면이 켜진 순간 렌더링 하면서 setInterval 함수를 불러오는 코드이다. 이 때 setInterval을 통해 count 변수를 1초동안(1000ms) 계속 1씩 증가시켜 counter를 증가시킨 코드이다!! 이 때 clearInterval은 setInterval 함수를 중지시키는 함수이다.
이 코드는 실행시켜보면 0에서 1로 증가한 뒤 작동하지 않는 것을 볼 수 있다... 이는 setInterval 콜백 내에서 count 값이 변경되지 않는다는 점 때문이다. 따라서 useEffect가 실행되면서 count 값이 0으로 실행된 채로 계속 setInterval 함수를 실행하는 것이다 ㅠㅠ. 이를 해결하기 위해서는 다음과 같이 코드를 고친다!!
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(id);
}, []);
return <h1>{count}</h1>;
}위의 코드와 같이 setCount(c => c + 1); 와 같은 형식으로 업데이트 된 count를 가져와서 실행시키면 계속해서 증가하는 카운터를 만들 수 있다!! useEffect를 실행하는 동안 count 값은 증가하지만 setInterval을 통해 증가하는 count는 0이었기 때문에 이런 현상을 고쳐주어야 했던 것을 기억하자!!
위 내용을 바탕으로 감소하는 초 타이머 구현해보았다!! 나는 초 타이머를 0이 되면 멈추도록 설정해보았고 위 에서 배운 내용을 적용해 보았다!!
function Counter() {
const [count, setCount] = useState(5);
useEffect(() => {
const id = setInterval(() => {
setCount(count => count - 1);
}, 1000);
if(count === 0){
clearInterval(id);
}
return () => clearInterval(id);
}, [count]);
return <h1>{count}</h1>;
}👇실행 결과!!👇
🍫 더 활용할 수 있는 부분...?
음 내가 봤을 때 setInterval을 통해 계속해서 정보를 가져오는 통신을 진행할 수 있을 것 같다. 예를 들어, 타이머 이외에도 시간에 따른 정보가 업데이트 되었을 때 그 정보를 바로 렌더링 함에 있어 굉장히 유용할 것 같다. 우리의 졸업프로젝트에서는 시간이 초과 되었을 때부터 정보를 측정하는 식으로 진행이 될텐데 이와 같은 것처럼 주기적으로 시간 변화에 따른 정보를 업데이트하는 과정은 서버와의 통신에 있어서도 중요할 것 같다!!
💎 정리
velog에 오랜만에 react에 관한 글을 작성해보았다!! 현재 졸업프로젝트를 진행하면서 react를 쓰고 있어 공부하는데에 굉장히 큰 도움이 되는 것 같다. 우리의 졸업프로젝트를 진행하면서 도움 되었던 Docs나 구현했던 자잘한 기능들을 react 카테고리에 앞으로 꾸준히 작성해보고 싶다!! 또한 여러 기능들 중에서도 서버와 통신하는 부분을 공부하고 이를 까먹지 않도록 잘 정리할 수 있도록 해보자!!
화이팅~!!
