All files / src/chap03 StateBasic.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useState } from 'react';
 
export default function StateBasic({ init }) {
  // Props(init)로 State(count) 초기화하기
  const [count, setCount] = useState(init);
  // [카운트] 버튼 클릭 시 카운트 값을 증가시킨다.
  console.log(`count is ${count}.`);
  const handleClick = () => setCount(count + 1);
 
  return (
    <>
      <button onClick={handleClick}>카운트</button>
      <p>{count}번 클릭했습니다.</p>
    </>
  );
}
 
 
 
// Code 3-3-28
// export default function StateBasic({ init }) {
//   const [count, setCount] = useState(init);
//   // [카운트] 버튼 클릭 시 카운트 값을 증가시킨다.
//   const handleClick = () => {
//     setCount(count + 1);
//     setCount(count + 1);
//   };
 
//   return (
//     <>
//       <button onClick={handleClick}>카운트</button>
//       <p>{count}번 클릭했습니다.</p>
//     </>
//   );
// }
 
// export default function StateBasic({ init }) {
//   const [count, setCount] = useState(init);
//   // [카운트] 버튼 클릭 시 카운트 값을 증가시킨다.
//   const handleClick = () => {
//     setCount(c => c + 1);
//     setCount(c => c + 1);
//   };
 
//   return (
//     <>
//       <button onClick={handleClick}>카운트</button>
//       <p>{count}번 클릭했습니다.</p>
//     </>
//   );
// }