이 글은 공식 문서를 참조하여 번역하는 느낌으로 작성되었습니다.
useCallback이란
useCallback은 리렌더링 사이에 함수 선언을 캐시할 수 있게 해주는 리액트 훅입니다.
여기서 캐시하다 라는 의미는, 다시 꺼내 사용할 수 있게 저장한다는 뜻과 같습니다.
언제 사용하나
- 컴포넌트의 리렌더링을 스킵할 때
- 기억된 콜백으로부터 상태를 업데이트할 때
- 너무 자주 발생하는 효과를 방지할 때
- 커스텀 훅을 최적화할 때
어떻게 사용하나
리렌더링 간에 컴포넌트의 최상단에서 useCallback을 호출하여 함수 정의를 캐시할 수 있습니다.
const cachedFunc = useCallback(fn, deps);fn
캐시하고 싶은 함수값입니다. 어떠한 인자도 받을 수 있고, 어떠한 값도 반환할 수 있습니다. 리액트는 최초에 렌더링 될 때 이 함수를 호출하지 않고 반환해줄 것입니다. 그 직후의 렌더링에서, 가장 최근의 렌더링 이후 deps에 변화가 없다는 전제 하에, 리액트는 같은 함수를 다시 반환해줄 것입니다.
그렇지 않다면, 현재의 렌더링이 되는 동안 전달한 함수를 반환해줄 것이고, 나중에 재사용될 수 있게 저장합니다. 리액트는 그 함수를 호출하지 않습니다. 그 함수가 반환되기 때문에 호출 할 시점과 호출 여부를 정할 수 있습니다.
deps
함수 코드 내에서 참조되는 모든 반응적인 값들의 집합입니다. 반응값에는 props, state, 모든 변수들과 컴포넌트 내에 직접 선언한 함수들이 포함됩니다. 만약 리액트 린터가 설정되어 있다면, 모든 반응값들이 올바르게 의존성에 포함되는지 검사합니다. 의존성 목록은 항상 일정한 수의 항목을 가져야하고, [dep1, dep2, dep3]와 같이 인라인으로 작성되어야 합니다. 리액트는 Object.is 비교 알고리즘을 사용하여 이전 값과 deps를 비교합니다.
return
최초 렌더링에서 useCallback은 개발자가 전달한 fn함수를 반환합니다.
직후 따라오는 렌더링에서 deps의 변화가 없다면, 전제 하에 가장 최근의 렌더링으로부터 이미 저장된 fn함수를 반환하고, 변화가 있다면 현재 렌더링 단계에서 개발자가 전달한 fn함수를 전달합니다.
참고
useCallback은 성능 최적화를 위해서만 사용되어야 합니다. 만약 코드가 useCallback 없이 동작하지 않는다면, useCallback 없이 고치는 것을 우선으로 해야합니다.. 그 후, 성능 최적화를 위해 useCallback를 추가하는 것이 바람직합니다.
컴포넌트 렌더링 최적화에 적용해보기
위는 내가 Docs를 참고하며, codepen으로 간단하게 만들어본 예시이다.
일반(함수)모드일 때는 부모 컴포넌트에 변화가 생겨서 리렌더링 될 때 마다, props로 넘겨진 fn함수가 재선언 후 호출되면서 자식 컴포넌트의 리렌더링을 일으킨다.
하지만, useCallback모드일 때는 부모 컴포넌트에 변화가 생겨 리렌더링 되어도, props로 넘겨진 fn함수가 호출되지 않고 반환만 되기 때문에 자식 컴포넌트의 리렌더링이 일어나지 않는 모습이다.
