# All files / src/chap07 RecoilCounter.js

0% Statements 0/7
100% Branches 0/0
0% Functions 0/4
0% Lines 0/6

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
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63

     // import { useRecoilState } from 'recoil';
    // import { counterAtom } from '../store/atom';

    // export default function RecoilCounter() {
    //   // Recoil 관리하에 값과 세터를 가져온다.
    //   const [counter, setCounter] = useRecoilState(counterAtom);

    //   const handleClick = () => {
    //     setCounter(c => c + 1);
    //     // setCounter(counter + 1);
    //   };

    //   return (
    //     <>
    //       <button onClick={handleClick}>카운트</button>
    //       <p>{counter}번 클릭되었습니다. </p>
    //     </>
    //   );
    // }

    // import { useRecoilValue, useSetRecoilState } from 'recoil';
    // import { counterAtom } from '../store/atom';

    // export default function RecoilCounter() {
    //   const counter = useRecoilValue(counterAtom);
    //   const setCounter = useSetRecoilState(counterAtom);

    //   const handleClick = () => {
    //     setCounter(c => c + 1);
    //   };

    //   return (
    //     <>
    //       <button onClick={handleClick}>카운트</button>
    //       <p>{counter}번 클릭되었습니다. </p>
    //     </>
    //   );
    // }

    import { useRecoilState, useResetRecoilState } from 'recoil';
    import { counterAtom } from '../store/atom';

    export default function RecoilCounter() {
      const [counter, setCounter] = useRecoilState(counterAtom);
      const resetCounter = useResetRecoilState(counterAtom);

      const handleClick = () => {
        setCounter(c => c + 1);
      };

      return (
        <>
          <button onClick={handleClick}>카운트</button>
          <button onClick={() => resetCounter()}>리셋</button>
          <p>{counter}번 클릭되었습니다. </p>
        </>
      );
    }