All files / src/chap07 RecoilCounter.js

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>
    </>
  );
}