useCallback
은 메모이제이션*된 콜백을 반환한다.
💡 메모이제이션(memoization): 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.
이를 통해 전체 화면 중 일부가 렌더링 되어도, 그것이 해당 함수가 영향을 받는 부분이 업데이트 되는 것이 아니면 매번 내용이 바뀔 때마다 발생하지 않도록 해주는 함수이다.
useCallback
은 메모이제이션이 된다는 특성 때문에 메모리에 많은 영향을 끼친다. 그러므로 필요한 경우에만 사용해야 한다!
useCallback
이 필요한 경우 : 자식 component로 props
를 전달하는 경우(그래서 자식이 re-render되는 경우)
필요 없는 경우: 자식에게 넘기는게 없는 경우
const search = useCallback(
(query) => {
youtube
.search(query)
.then((videos) => {
setVideos(videos);
setSelectedVideo(null);
});
},
[youtube]
);
위의 예시는 query
가 입력될 때마다 검색 API를 실행해서 비디오를 출력하는 useCallback
함수이다.
검색 기능은 생각해보면, 검색이 실행되지 않을 때 (즉, 검색 외 다른 상황에서) 굳이 render될 필요가 없다. 오히려 매번 다른 컴포넌트들이 업데이트 될 떄마다 render가 된다면, 불필요한 요소를 render함으로써 필요없는 네트워크 통신을 매번 하게 된다.
이와 같이, 매번 render 될 필요 없는 컴포넌트들의 경우 useCallback
을 사용하면 요긴하게 불필요한 rendering을 방지할 수 있다.