TIL - React: useCallback

김현재·2021년 8월 23일
0
post-thumbnail

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을 방지할 수 있다.

profile
쉽게만 살아가면 재미없어 빙고!

0개의 댓글