[React] useCallback이 뭔데 자꾸 하라고 시키는거야?

useEffect를 깨닫고 드디어 나도 Hooks의 즐거움을 느낄 수 있게 되었구나라고 생각하던 찰나,

VScode는 저에게 또 다른 과제를 주었습니다.

바로 useCallback을 함수에 씌우라는 명령이었죠.

0. useCallback이 뭘까?

useCallback을 이해하기 위해서는 먼저 memoization과 useMemo에 대해서 알아야 합니다.

하지만 이번 포스팅의 주된 요소는 useCallback이기 때문에 간단하게만 설명하고 넘어가겠습니다.

Memoization은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재사용하는 프로그래밍 기법입니다.

중복 연산을 피해서 성능을 최적화할 수 있는 좋은 방법이죠.

useMemo는 같은 인자가 들어오는 경우 함수를 다시 호출해서 계산하는 것이 아니라 값을 저장해두고 가져다 쓸 때 사용합니다.

useCallback은 함수를 Memoization한다고 볼 수 있습니다.

useCallback은 첫 번째 매개변수로 함수를, 두 번째 매개변수로 의존성 배열을 받습니다.

의존성 배열에 들어있는 값이 변하지 않으면 함수를 새롭게 생성하지 않고 기존에 존재하는 함수를 재사용하는 것이죠.

자바스크립트에서는 함수 역시 참조형 데이터입니다. (function이 Object인 것은 이전 포스팅에서 많이 다뤘습니다!!)

그렇기 때문에 만약 어떤 함수를 다른 함수의 인자로 넘기거나 자식 컴포넌트의 props로 넘기게 된다면 새롭게 함수를 생성하면서 느려질 가능성이 존재합니다.

이런 경우를 방지하기 위해서, 의존 배열이 변경되지 않으면 새롭게 함수를 생성하지 않는 것이 useCallback의 주된 기능이죠!

1. 인생은 실전

저는 타이머를 만들 때 공통되는 부분이 생기길래 따로 함수로 빼주려고 했습니다.

이렇게 뺀 후에 함수만 넣어주는 방식으로 사용하려고 했죠.

그런데?? useEffect의 의존성 배열을 increase로 바꾸고 나니 increase에 경고밑줄이 생겼습니다.

경고를 자세히 읽어보면, increase라는 함수는 매번 새롭게 생성되기 때문에 이걸 막으려면 useCallback을 쓰라고 나와있습니다.

매번 리렌더링이 될 때마다 increase 함수는 겉으로 보기에는 같아보이지만 참조형 데이터이기 때문에 새롭게 생성된다는 이야기죠.

이걸 막기 위해서 의존성 배열에 있는 요소가 변경되지 않는다면 매번 같은 주소에 위치한 함수를 쓰겠다는 의미로 useCallback을 사용하라는 이야기가 되겠습니다.

하라는 대로 해주면 끝입니다!

리액트는 참 똑똑한 친구네요 ㅎㅎ 이런 것도 챙겨주고 말이죠!

TMI : 저는 useEffect 밖에서도 해당 함수를 사용하기 위해서 이렇게 밖으로 뺐지만, useEffect 안에서만 사용하는 함수의 경우에는 useCallback을 사용하지 않고 그냥 useEffect 안에서 함수를 선언하고 필요한 요소를 의존성배열 안에 넣는 방식으로 처리해도 경고 메시지가 사라집니다!