react - useCallback

useCallback

함수 생성이 불필요하게 계속 될 때 useCallback을 이용하여 함수를 memorization 해서 사용할 수 있다.

useMemo와의 차이점 :
useMemo는 연산된 결과 값을 저장,
useCallback은 함수를 저장

const { useState, useEffect, useCallback } = React;

        function App() {

            const [number, setNumber] = useState(0);
            const [toggle, setToggle] = useState(false);

            /* 함수 생성이 불필요하게 계속 될 때 useCallback을 이용하여 함수를 
            memorization 해서 사용할 수 있다. */
            const printNumber = useCallback(() => {
                console.log(`current number : ${number}`);
            }, [number]);
            // 빈 배열로 작성 시 최초 로딩 될 때 한 번 함수 생성 후 계속 사용한다는 의미

            useEffect(() => {
                console.log('printNumber 함수가 변경 되었습니다.');
            }, [printNumber]);

            return (
                <>
                    <input
                        type="number"
                        value={ number }
                        onChange={ (e) => setNumber(e.target.value) }
                    />
                    <button
                        onClick={ () => setToggle(!toggle) }
                    >   
                        { toggle.toString() }
                    </button>
                    <button
                        onClick={ printNumber }
                    >
                        printNumberState
                    </button>
                </>
            );
        }