state 응용..? 질문드립니다!

Question

수업 너무 머리아프고 재미있게 잘 듣고있습니다! 개인적으로 오늘 배운 state는 너무 재미있는데요! 수업을 듣고 곰곰히 생각하다 문득 떠오르는게 있어 질문드립니다! import React from "react"; function TimerComponent() { const [time, setTime] = React.useState(0); console.log("컴포넌트 업데이트"); function updateTime() { setTime(time + 1); } return (

{time}초

); } export default TimerComponent; 이 코드를 쓰면 누를때 마다 숫자가 올라가잖아요?? 그런데 조건을 좀 더 넣어서 연달아서 3초이상 누르지 않으면 다시 자동으로 0으로 돌아가게 만들려면 어떤것을 배워야 할까요?? 지금까지 배워왔던 걸로도 구현해 낼 수 있을까요?

그랩 · Answer

연달아서 3초 이상 누르지 않을 때 자동으로 돌아가게 하려면, 우선 마지막으로 누른시간에 대한 상태을 가지고 있어야 할 것 같습니다. 그리고 동시에 3초이상 누르지 않았는지 확인하기 위한 로직이 필요한데요. 해당 로직은 useEffect를 사용해서 컴포넌트가 렌더링될 때 실행되도록 하고, useEffect내에 setInterval 같은 함수를 사용해서 0.1초에 한번씩 마지막으로 누른 시간과 현재 시간을 비교해 3초 이상 차이가 났을 때를 확인하고 time state를 되돌리는 로직을 추가할 것 같습니다 ㅎㅎ 말로 쓰다보니 길어졌는데, 한번 코드 작성해보시고 공유해주시면 피드백드리겠습니다!