react - useMemo

useMemo

01~03_performance-optimization

시간과 비용이 드는 계산과 간단한 계산이 있다.
(hardCalculator와 easyCalculrator)

간단한 연산을 수행해서 state가 바뀔 때
다시 화면을 랜더링하기 위해 해당 App함수를 다시 호출하기 때문에 hardCalculator와 easyCalculrator가 둘 다 다시 수행된다.

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

함수 작성

const {useState, useMemo} = React;
        

        const hardCalculator = (number) => {
            
            console.log('어려운 계산');
            
            for(let i = 0; i < 999999; i++){
                // blank - 시간과 비용이 드는 계산이라는 의미로 작성한 반복문
            }

            return number + 10000;

        };

        const easyCalculator = (number) => {

            console.log('쉬운 계산');

            return number + 1;
        }

useMemo가 전달받는
첫번째 인자 : 콜백함수.
연산을 수행한 후 반환 받는 값을 리턴 값 형태로 작성
두번째 인자 : 의존성 배열.
의존성 배열에 등록한 값의 변화를 감지한다.
빈 배열을 사용하면 아무것도 감지하지 않기 때문에 첫 로딩 시에만 호출하여 값을 메모라이즈한다.

useMemo 작성 예시

const hardNum = useMemo(
                () => {
                    return hardCalculator(hardNumber);  
                }, [hardNumber]
            );

APP 작성

function App(){

            const [hardNumber, setHardNumber] = useState(1);    // 1이라는 값으로 hardNumber 초기화
            const [easyNumber, setEasyNumber] = useState(1); 

// 콜백함수
            const hardNum = useMemo(
                () => {
                    return hardCalculator(hardNumber);  
                }, [hardNumber]
            );
            const easyNum = useMemo( 
                () => {
                    return easyCalculator(easyNumber)
                }, [easyNumber]
            );

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

04_object-type-problem

객체의 경우 App이 호출될 때마다 지역 변수가 초기화되면서 매번 새로운 객체를 만들기 때문에 속성 값은 변경이 없더라도 매번 새로운 객체가 만들어지게 된다.
이때 useEffect의 의존성 배열에 추가된 location은 매번 다른 값으로 인지를 하기 때문에 number만 바뀌었을 뿐인데 매번 useEffect가 호출되는 현상이 발생하게된다.

useMemo를 활용해서 해결한다.

const { useState, useEffect, useMemo } = React;


        function App() {

            const [number, setNumber ] = useState(0);
            const [isKorea, setIsKorea] = useState(true);


/* useMemo를 활용한 해결 */
             const location = useMemo(() => {
                return {
                    country : isKorea ? '한국' : '외국'
                }
             }, [isKorea]);


             useEffect(() => {
                console.log('useEffect 호출됨...');
            },
            [location]);



            return (
                <>
                    <h1>좋아하는 숫자를 입력해주세요</h1>
                    <input 
                        type="number"
                        value={ number }
                        onChange={ (e) => setNumber(e.target.value) }
                    />
                    <hr/>

                    <h1>지금 당신이 있는 국가는?</h1>
                    {/* <p>국가 : {location} </p> */}
                    <p>국가 : {location.country}</p>
                    <button onClick={ () => setIsKorea(!isKorea) }>국가 토글하기</button>

                </>


            );

        }



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