[React] useCallback Hooks

 

useCallback을 배우기 전에 알아야 하는 것

1. 함수형 컴포넌트는 단지 jsx를 반환하는 함수입니다.
2. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여 실행되는 것을 말합니다.
   함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또 다른 함수 등)도 매번 다시 선언되어 사용된다.
3. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 됩니다.

 

useCallback

useCallback은 리액트 공식문서에 따르면 메모이제이션된 함수를 반환한다라는 문장이 핵심입니다. 첫번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다. 

const memoizedCallback = useCallback(함수, 배열);

예를 들어 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 렌더링 될 때마다 새로운 함수가 생성됩니다. 

const add = () => x + y;

하지만 useCallback()을 사용하면, 해당 컴포넌트가 렌더링 되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다. 즉, x 또는 y 값이 바뀌면 새로운 함수가 생성되어 add변수에 할당되고, x와 y값이 동일하다면 다음 렌더링 때 이 함수를 재사용합니다.  

const add = useCallback(() => x + y, [x, y]);