# All files / src/chap07 HookTimer.js

100% Statements 8/8
50% Branches 1/2
100% Functions 5/5
100% Lines 7/7

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

    2x

    2x

    1x
    1x

    1x
    1x

    2x

     import { useEffect, useState } from 'react';
    import './HookTimer.css';

    export default function HookTimer({ init }) {
      const [count, setCount] = useState(init);

      useEffect(() => {
        // 타이머 준비
        const t = setInterval(() => {
          setCount(c => c - 1);
        }, 1000);
        // 컴포넌트 폐기 시 타이머도 함께 폐기
        return () => {
          clearInterval(t);
        };
      }, []);

      return (
        // 카운터가 0보다 작아지면 스타일 WARN 적용
        <div className={count < 0 ? 'warn' : ''}>
          현재 카운트 : {count}
        </div>
      );
    }