그래서 useCallback이 함수를 캐시할 수 있다고 하는데, 코드 실행 속도를 빠르게 하려는 의도인 것 같습니다.

예를 들어 다음과 같은 경우가 있습니다.

 const handlerChange = (ev) => setMsg(ev.target.value); }; 

다음과 같이 변경할 수도 있습니다.

 const handlerChange = useCallback((ev) => { setMsg(ev.target.value); }, []); 

이제 함수가 캐시되었습니다. 그런데 컴포넌트가 다시 렌더링될 때 이 함수를 생성해야 합니까?

테스트를 위해 IIFE로 변경하여 함수가 출력되도록 했고, 함수가 출력되고 있다고 인쇄했습니다.

참조: https://codesandbox.io/s/jolly-nightingale-zxqp8k

따라서 입력 상자에 무언가를 입력할 때마다 콘솔에 표시된 것처럼 새로운 함수가 출력됩니다. 이는 IIFE가 매번 실행된다는 의미이며, 이는 IIFE가 아니더라도 함수 리터럴이 매번 함수 개체로 변환된다는 의미이기도 합니다. 그렇다면 이 도움말 코드는 어떻게 더 빠르게 실행됩니까?