usecallback 으로 만든 함수가 새로 불러와 지지 않음을 어떻게 확인할 수 있나요?

useEffect로 찍어보시는 건 어떨까요? 그리거 저는 useInput은 여러개의 input를 관리하기 용이하여 사용하고 있어요!

두 가지 방법이 있고 첫 번째 useEffect를 활용한 방법을 추천드립니다. 1. (추천) `useEffect`에 `useCallback`으로 정의한 함수를 종속성으로 넣고 useEffect 로직이 몇 번 실행되는지 확인해 본다. - 코드 참조 2. `React.memo`로 감싼 자식 컴포넌트를 만들고 `useCallback`으로 정의한 함수를 prop으로 받는다. 부모 컴포넌트에서 일부러 렌더링을 유발시킨 뒤 자식 컴포넌트에서 console.log('render')가 찍히는지 확인해본다. 이 경우, 만약 `useCallback`으로 메모이제이션된 함수가 변경되지 않았다면, 해당 함수를 prop으로 받는 자식 컴포넌트는 리렌더링되지 않아야 한다.

1const memoizedCallback = useCallback(() => {
2  doSomething(a, b);
3}, [a, b]);
4
5useEffect(() => {
6  console.log('함수 참조 변경');
7}, [memoizedCallback]);

'useCallback' 훅을 사용하여 생성된 함수가 새롭게 불러와지지 않음을 확인하는 방법은 다음과 같습니다. 1. 'console.log'를 사용하여 함수가 호출되었는지 확인하기: 'useCallback'으로 생성된 함수 내부에 'console.log'를 추가하여 함수가 호출되었을 때 콘솔에 로그가 출력되는지 확인할 수 있습니다. 이 방법은 함수가 새롭게 불러와지지 않으면 로그가 한 번만 출력되는 것을 확인할 수 있습니다. 2. 함수 내부의 지역 변수를 사용하여 상태 유지하기: 'useCallback'으로 생성된 함수 내부에 지역 변수를 사용하여 함수가 호출되었는지 상태를 유지할 수 있습니다. 예를 들어, 함수 내부에 'let count = 0'과 같이 변수를 선언하고 함수가 호출될 때마다 'count' 값을 증가시키는 등의 작업을 수행하면, 'count' 변수의 값이 계속 유지되는 것을 확인할 수 있습니다. 'useInput' 커스텀 훅의 경우, 'useCallback'으로 생성된 함수를 반환하는 것이 아니라 입력값과 이벤트 핸들러를 반환하는 훅일 것으로 예상됩니다. 'useInput' 훅 내부에서는 입력값의 상태 관리와 이벤트 핸들러의 생성을 담당하고, 이벤트 핸들러는 매번 새롭게 생성되는 것이 일반적입니다. 이렇게 커스텀 훅을 사용하면 다른 컴포넌트에서도 동일한 로직을 사용할 수 있으며, 코드의 재사용성과 가독성을 높일 수 있습니다.