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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | import { useMemo, useCallback, useState } from 'react';
import { MyButton, MyCounter } from './HookMemoChild';
// 인자 delay만 처리를 일시 정지하는 코드
const sleep = delay => {
const start = Date.now();
while (Date.now() - start < delay);
};
export default function HookMemo() {
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);
// MyButton에 넘겨주는 핸들러
const increment = () => setCount1(c => c + 1);
const decrement = () => setCount2(c => c - 1);
// count1에 100을 더한 값을 계산하는 코드 (더미 헤비 처리)
const heavyProcess = () => {
sleep(1000);
return count1 + 100;
};
return (
<>
{/* 값을 1씩 증가시키는 카운터 */}
<div>
<MyButton id="btn1" handleClick={increment}>카운트업</MyButton>
<MyCounter id="c1" value={count1} />／
{heavyProcess()}
{/* {heavyProcess} */}
</div>
<div>
{/* 값을 1씩 감소시키는 카운터 */}
<MyButton id="btn2" handleClick={decrement}>카운트다운</MyButton>
<MyCounter id="c2" value={count2} />
</div>
</>
);
}
// Code 7-6-4
// import { useMemo, useCallback, useState } from 'react';
// import { MyButton, MyCounter } from './HookMemoChild';
// // 인자 delay만 처리를 일시 정지하는 코드
// const sleep = delay => {
// const start = Date.now();
// while (Date.now() - start < delay);
// };
// export default function HookMemo() {
// const [count1, setCount1] = useState(0);
// const [count2, setCount2] = useState(0);
// // MyButton에 넘겨주는 핸들러
// const increment = () => setCount1(c => c + 1);
// const decrement = () => setCount2(c => c - 1);
// // count1에 100을 더한 값을 계산하는 코드 (더미 헤비 처리)
// const heavyProcess = useMemo(() => {
// sleep(1000);
// return count1 + 100;
// }, [count1]);
// return (
// <>
// {/* 값을 1씩 증가시키는 카운터 */}
// <div>
// <MyButton id="btn1" handleClick={increment}>카운트업</MyButton>
// <MyCounter id="c1" value={count1} />／
// {heavyProcess}
// </div>
// <div>
// {/* 값을 1씩 감소시키는 카운터 */}
// <MyButton id="btn2" handleClick={decrement}>카운트다운</MyButton>
// <MyCounter id="c2" value={count2} />
// </div>
// </>
// );
// }
// Code 7-6-6
// import { useMemo, useCallback, useState } from 'react';
// import { MyButton, MyCounter } from './HookMemoChild';
// // 인자 delay만 처리를 일시 정지하는 코드
// const sleep = delay => {
// const start = Date.now();
// while (Date.now() - start < delay);
// };
// export default function HookMemo() {
// const [count1, setCount1] = useState(0);
// const [count2, setCount2] = useState(0);
// // MyButton에 넘겨주는 핸들러
// const increment = useCallback(() => setCount1(c => c + 1), []);
// const decrement = useCallback(() => setCount2(c => c - 1), []);
// // count1에 100을 더한 값을 계산하는 코드 (더미 헤비 처리)
// const heavyProcess = useMemo(() => {
// sleep(1000);
// return count1 + 100;
// }, [count1]);
// return (
// <>
// {/* 값을 1씩 증가시키는 카운터 */}
// <div>
// <MyButton id="btn1" handleClick={increment}>카운트업</MyButton>
// <MyCounter id="c1" value={count1} />／
// {heavyProcess}
// </div>
// <div>
// {/* 값을 1씩 감소시키는 카운터 */}
// <MyButton id="btn2" handleClick={decrement}>카운트다운</MyButton>
// <MyCounter id="c2" value={count2} />
// </div>
// </>
// );
// }
|