Hook-UseMemo

12-1. Performance Optimizer

• 간단한 작업을 할 때 시간이 오래 걸리는 작업을 함께 수행하는 것은 비효율적
• 연산을 통해 나온 값을 메모리상에 저장해두고, 해당 값이 변경되지 않을 때는 다시 연산하지 않도록 함
• 연산으로 얻은 값 자체를 메모라이즈 하기 위해 사용되는 hook이 useMemo

const hardCalculator = (number) => {
            console.log('어려운 계산');
            for(let i = 0 ; i < 99999; i++){
                //blank - 시간과 비용이 드는 계산이라는 의미
            }
            return number + 10000;
        };

        const easyCalculator = (number) => {
            console.log('쉬운 계산');

            return number + 1;
        }

        const { useState, useMemo } = React;

        function App(){

            const [hardNumber, setHardNumber ] = useState(1);
            const [easyNumber, setEasyNumber ] = useState(1);

            /* 첫번째 인자는 연산을 수행한 후 반환 받는 값을 리턴 값 형태로 작성
            두 번째 인자는 의존성 배열이라고 하는데, 의존성 배열에 등록한 값의 변화를 감지한다.
            만약 빈 배열을 사용하면 아무것도 감지하지 않기 때문에 첫 로딩 시에만 호출하여 값을 메모라이즈 한다. */
            const hardNum = useMemo(
                () => { return hardCalculator(hardNumber)}, 
                [hardNumber]
            );

            const easyNum = useMemo(
                () => { return easyCalculator(easyNumber)},
                [easyNumber]
            );
            

            /* 시간이 얼마 걸리지 않는 연산을 수행해서 state가 바뀔 때
            다시 화면을 랜더링 하기 위해 해당 App 함수를 다시 호출하기 때문에
            hardCalculator와 easyCalculator가 둘 다 다시 수행 된다. */
            return(
                <>
                    <h3>어려운 계산기</h3>
                    <input type="number" value = {hardNumber} onChange = { (e) => setHardNumber(parseInt(e.target.value))}/>
                    <span>  + 10000 = {hardNum} </span>

                    <h3>쉬운 계산기</h3>
                    <input type="number" value = {easyNumber} onChange = { (e) => setEasyNumber(parseInt(e.target.value))}/>
                    <span>  + 1 = {easyNum} </span>
                </>
            );
        }

        ReactDOM.createRoot(document.getElementById('root')).render(<App/>);