# All files / src/chap07 HookRefNg.js

0% Statements 0/11
0% Branches 0/2
0% Functions 0/5
0% Lines 0/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

     import { useState } from 'react';

    export default function HookRefNg() {
      // 타이머 켜기/끄기를 관리하기 위한 변수
      let id = null;
      const [count, setCount] = useState(0);

      // [시작] 버튼으로 타이머 생성하기
      const handleStart = () => {
        // 타이머 작동 중일 때는 아무것도 하지 않음(두 번 누르기 방지)
        if (id === null) {
          id = setInterval(() => setCount(c => c + 1), 1000);
        }
      };
      // [종료] 버튼으로 타이머를 종료한다.
      const handleEnd = () => {
        clearInterval(id);
        id = null;
      };

      return (
        <>
          <button onClick={handleStart}>시작</button>
          <button onClick={handleEnd}>종료</button>
          <p>{count}초 경과</p>
        </>
      );
    }