Hook-UseCallback

13-1. Problem

const { useState, useEffect } = React;

        function App() {

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

            const printNumber = () => {
                console.log(`current number : ${number}`);
            }

            /* printNumber가 변경 될 때만 호출 되도록 하는 의도로 작성했지만
            printNumber 함수는 객체이고, App을 재호출 할 때마다 초기화가 되기 때문에 
            toggle을 변경할 때도 printNumber가 불필요하게 초기화가 다시 일어난다. */
            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>
                </>
            );
        }

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

13-2. Function Memorization

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

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])
            // 빈 배열로 작성 시 최초 로딩 될 때 한 번 함수 생성 후 계속 사용한다는 의미

            /* printNumber가 변경 될 때만 호출 되도록 하는 의도로 작성했지만
            printNumber 함수는 객체이고, App을 재 호출 할 떄마다 초기화가 되기 때문에 toggle을 변경할 때도 printNumber가 불필요하게 초기화가 다시 일어난다.*/
            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>
                </>
            )
        }

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

13-3. Composited Component usecallback

const {useState, useEffect, useCallback}  = React;

        function App(){

            const [size, setSize] = useState(200);
            const [isDark, setIsDark] = useState(false);

            const genSquareStyle = useCallback(
                () => {
                    return{
                        backgroundColor : 'orangered',
                        width : `${size}px`,
                        height : `${size}px`
                    }
                },
                [size]
            )

            return(
                <>
                    <div style={{backgroundColor : isDark? 'black' : 'white'}}>
                            <input
                                type="range"
                                min="100"
                                max="300"
                                value={size}
                                onChange={(e) => setSize(e.target.value)}
                            />
                            <button
                                onClick= {() => setIsDark(!isDark)}
                            >{isDark.toString()}</button>
                            <Square genSquareStyle={genSquareStyle}/>
                    </div>
                </>
            )
        }

        function Square(props){

            const [style, setStyle] = usete({});

            useEffect(
                () => {
                    console.log('style변경');
                    setStyle(props.genSquareStyle())
                },
                [props.genSquareStyle]
            )

            return(
                <div style={style}></div>
            )
        }

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