리액트) useCallback

0. useCallback

- 렌더링 성능을 최적화 해야하는 상황에서 사용하는 Hook으로, 만들어놨던 함수를 재사용할 수 있어서 메모리 사용량을 줄일 수 있다. 

- 리액트 컴포넌트가 자주 렌더링 되거나, 함수가 큰 자원을 사용할 때 중요하다. 

 

🔸useCallback 사용 방법

const memoizedCallback = useCallback(콜백함수, 의존성 배열);

useCallback은 첫 번째 인자로 넘어온 콜백 함수를, 두 번째 인자로 넘어온 의존성배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해준다.

 

const add = () => x + y;

// useCallback을 사용하면 아래와 같이 표현하기
const add = useCallback(() => x + y, [x, y]);

 

🔸재사용 어떻게 해??

 

예를 들어 리액트 컴포넌트 안에 함수가 선언되어있을 때 이 함수는 해당 컴포넌트가 렌더링 될 때마다 새로운 함수가 생성되는데, useCallback을 사용하면 해당 컴포넌트가 렌더링 되더라도 그 함수가 의존하는 값(deps)들이 바뀌지 않는 한 기존 함수를 재사용할 수 있다.  의존성 배열에 명시된 값들이 변경되지 않는 한, React는 메모리에 캐시된 함수를 재사용한다. 즉, 'useCallback'은 불필요한 함수 생성을 방지하고 성능을 최적화하는데 도움을 준다. 

 

🔸새로운 함수가 생성된다는게 무슨말이야?

- 리액트 컴포넌트가 렌더링 될 때마다 해당 컴포넌트 내에 정의된 함수들이 다시 생성되어 메모리에 할당된다는 의미이다. 즉, 렌더링 될때마다 컴포넌트의 함수가 다시 실행이 되는데, 컴포넌트 함수 안에서 정의된 모든 것들이 매번 다시 실행되며, 그 중 함수도 포함된다.

 

새로 생성이 된다는 것은 아래와 같이 자바스크립트 함수 동등성 때문이다. 

아래 코드 예제처럼, 자바스크립트에서 함수도 객체로 취급이 되기 때문에 메모리 주소에 의한 참조 비교가 일어나기 때문이다. add1과 add2가 동일한 undefined임에도 false가 나오는 이유이다. 

> const add1 = () => x + y;
undefined
> const add2 = () => x + y;
undefined
> add1 === add2
false

 

 

다음과 같은 코드를 살펴보자

const increment = useCallback(() => {
  setCount(count + 1);
}, [count]);

위 코드에서 increment 함수는 count라는 상태값에 의존하고 있다. useCallback은 이 함수를 메모리에 저장하고, count 값이 변경될 때마다 새로운 increment 함수를 생성하고 메모리에 저장한다. 만약 count 값이 변경되지 않는다면, useCallback은 이전에 생성된 increment 함수를 계속해서 재사용한다. 즉, 새로운 함수를 생성하거나 메모리에 저장하는 작업을 하지 않는다.

---

참고자료

https://www.daleseo.com/react-hooks-use-callback/

React Hooks: useCallback 사용법