useCallback

useCallback Hook는 지난 포스트에서 다룬 useMemo처럼 최적화를 담당하고 있습니다. 차이점은 useMemo는 컴포넌트 내부 연산을 주로 최적화 하고, useCallback은 렌더링 자체의 성능 최적화에 주로 사용됩니다. 그래서 주로 렌더링이 자주 되는 컴포넌트에서 혹은 컴포넌트가 많아지면 사용하게 됩니다.

지난번에 만들었던 컴포넌트를 통해 실습해보겠습니다. 지난번에 사용한 컴포넌트의 코드입니다.

import React, {Fragment, useState, useMemo} from 'react';

const getTotal = numbers => {
    let total = 0;

    console.log('getTotal() 호출');

    numbers.forEach(value => {
        total += value;
    });

    return total;
};

const AddInputNum = () => {
    const [numbers, setNumbers] = useState([]);
    const [input, setInput] = useState('');

    const onChange = e => {
        setInput(e.target.value);
    };

    const onInsert = e => {
        const nextNumber = numbers.concat(parseInt(input));

        setNumbers(nextNumber);
        setInput('');
    };

    const total = useMemo(() => getTotal(numbers), [numbers]);

    return (
        <Fragment>
            <input value={input} onChange={onChange}/>
            <button onClick={onInsert}>입력</button>
            <div>
                <span>총합: </span>{total}
            </div>
        </Fragment>
    );
};

export default AddInputNum;

---

useCallback을 추가해보겠습니다. useCallback은 다음과 같은 형태로 사용합니다.

useCallback(함수, 의존성 값);

첫번째 인자인 함수는 useCallback을 통해 생성할 함수를 넣습니다. 그리고 두 번째 인자로 의존성 값을 전달합니다. 이 의존성 값은 이전 사용과 마찬가지로 배열의 형태로 넣게되는데 배열 내부에 넣은 값이 변경될 때만 함수가 생성됩니다. 이제 실제로 사용해보겠습니다.

import React, {Fragment, useState, useMemo, useCallback} from 'react';

const getTotal = numbers => {
    let total = 0;

    console.log('getTotal() 호출');

    numbers.forEach(value => {
        total += value;
    });

    return total;
};

const AddInputNum = () => {
    const [numbers, setNumbers] = useState([]);
    const [input, setInput] = useState('');

    const onChange = useCallback(e => {
        setInput(e.target.value);
    }, []);

    const onInsert = useCallback(e => {
        const nextNumber = numbers.concat(parseInt(input));

        setNumbers(nextNumber);
        setInput('');
    }, [input, numbers]);

    const total = useMemo(() => getTotal(numbers), [numbers]);

    return (
        <Fragment>
            <input value={input} onChange={onChange}/>
            <button onClick={onInsert}>입력</button>
            <div>
                <span>총합: </span>{total}
            </div>
        </Fragment>
    );
};

export default AddInputNum;

onInsert 함수는 useCallback에 의해 의존성 배열로 전달된 input 또는 numbers의 값이 변경될 때에만 함수가 호출됩니다.