-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
state 응용..? 질문드립니다!
22.06.01 01:24 작성 조회수 96
1
수업 너무 머리아프고 재미있게 잘 듣고있습니다!
개인적으로 오늘 배운 state는 너무 재미있는데요!
수업을 듣고 곰곰히 생각하다 문득 떠오르는게 있어 질문드립니다!
import React from "react";
function TimerComponent() {
const [time, setTime] = React.useState(0);
console.log("컴포넌트 업데이트");
function updateTime() {
setTime(time + 1);
}
return (
<div>
<h3>{time}초</h3>
<button onClick={updateTime}>1씩 올려주세요</button>
</div>
);
}
export default TimerComponent;
이 코드를 쓰면 누를때 마다 숫자가 올라가잖아요??
그런데 조건을 좀 더 넣어서 연달아서 3초이상 누르지 않으면 다시 자동으로 0으로 돌아가게 만들려면 어떤것을 배워야 할까요?? 지금까지 배워왔던 걸로도 구현해 낼 수 있을까요?
답변을 작성해보세요.
0
그랩
지식공유자2022.06.02
연달아서 3초 이상 누르지 않을 때 자동으로 돌아가게 하려면,
우선 마지막으로 누른시간에 대한 상태을 가지고 있어야 할 것 같습니다.
그리고 동시에 3초이상 누르지 않았는지 확인하기 위한 로직이 필요한데요. 해당 로직은 useEffect를 사용해서 컴포넌트가 렌더링될 때 실행되도록 하고, useEffect내에 setInterval 같은 함수를 사용해서 0.1초에 한번씩 마지막으로 누른 시간과 현재 시간을 비교해 3초 이상 차이가 났을 때를 확인하고 time state를 되돌리는 로직을 추가할 것 같습니다 ㅎㅎ
말로 쓰다보니 길어졌는데, 한번 코드 작성해보시고 공유해주시면 피드백드리겠습니다!
답변 1