기존의 useMemo가 값을 저장하는 hook이라면 useCallBack은 특정 함수를 저장하는hook이다.

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

    const printNumber = () => {
        console.log('current number: ',  number);       
    }

    useEffect(() => {
            console.log('printNumber 값 변화 인지됨');
    },[printNumber]);

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

해당 예시에서 첫 번째 버튼을 누를 때는 useEffect가 실행이 되고 두 번째 버튼을 눌렀을 때는 useEffect가 실행이 안됨

• 예시에서 설정한 useEffect 자체는 마운트 시점과 printNumber의 update가 실행이 될 때만 발생함
  • 첫 번째 버튼에서 toggle값의 state의 변화가 생기면서 printNumber 함수도 재할당이 되어 업데이트로 인지가 되어 실행 → 결국 함수 재할당 리소스 낭비

함수의 memorization

• 함수 생성이 불필요하게 계속 될 때 useCallback을 이용

const printNumber = useCallback(
    () => {
        console.log('current number: ',  number);       
    },
    [number]   
);

→ useMemo와 사용법 또한 비슷하다.

• 콜백 함수의 두 번째 인자로 오는 배열을 의존성 배열이라 함
• 의존성 배열 자리에 빈 배열을 두게 되면 마운트 시점에 한번 지역변수 초기화를 위해 사용되고 나서 함수는 새로 정의 되지 않으며 항상 number의 초기값인 0만 출력