• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

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으로 돌아가게 만들려면 어떤것을 배워야 할까요?? 지금까지 배워왔던 걸로도 구현해 낼 수 있을까요?

 

답변 1

답변을 작성해보세요.

0

연달아서 3초 이상 누르지 않을 때 자동으로 돌아가게 하려면,

우선 마지막으로 누른시간에 대한 상태을 가지고 있어야 할 것 같습니다.

그리고 동시에 3초이상 누르지 않았는지 확인하기 위한 로직이 필요한데요. 해당 로직은 useEffect를 사용해서 컴포넌트가 렌더링될 때 실행되도록 하고, useEffect내에 setInterval 같은 함수를 사용해서 0.1초에 한번씩 마지막으로 누른 시간과 현재 시간을 비교해 3초 이상 차이가 났을 때를 확인하고 time state를 되돌리는 로직을 추가할 것 같습니다 ㅎㅎ

말로 쓰다보니 길어졌는데, 한번 코드 작성해보시고 공유해주시면 피드백드리겠습니다!