useCallback

React는 여러가지 편리한 훅들을 제공한다.
그 중 useCallback은 메모이제이션과 관련이 있다.

📋 메모이제이션

메모이제이션은 이전에 계산한 값을 저장해두고, 동일한 입력이 다시 발생할 때 미리 계산한 값을 사용하여 연산을 생략하고 성능을 향상시키는 기술이다. 주로 함수의 결과를 캐싱하여 이전에 계산한 입력에 대한 결과를 기억하는 데 사용된다.
React는 useMemo와 useCallback 훅을 제공한다.

useCallback 사용방법

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

• useCallback은 두 개의 매개변수를 가진다.
• 첫 번째 매개변수: 콜백 함수
• 두 번째 매개변수: 의존성 배열

의존성 배열이란?

• 의존성 배열은 useMemo 또는 useCallback과 같은 훅에서 사용되는 배열로, 해당 배열에 나열된 값들이 변할 때에만 해당 훅이 새로 실행되거나 새로운 값을 반환하도록 동작한다.

  위 예시 코드에서는 의존성 배열은 [a,b]이다. a나 b가 변경되지 않는 한 doSomething 함수를 반환하는 콜백 함수는 이전에 생성한 함수를 반환하게 된다. 의존성 배열을 사용하면 특정 변수의 변화에 반응하도록 설정할 수 있다.

• 빈 배열 []도 입력이 가능하다. 빈 배열은 함수가 생성된 후에는 해당 함수는 컴포넌트의 생명주기 동안 변하지 않음을 의미한다. 이 경우, 함수 내에서 사용되는 외부 변수에 변화가 생기더라도 함수는 재생성되지 않는다.

함수의 재생성이 성능에 미치는 영향

함수의 재생성이 어떤 영향을 미치기에 useCallback 훅을 사용해야할까?

함수 재생성의 영향

1. 리렌더링: 함수가 재생성되면 해당 함수를 사용하는 컴포넌트의 리렌더링이 발생한다. 리렌더링은 함수가 속한 컴포넌트 뿐만 아니라 해당 함수를 props로 받은 자식 컴포넌트에도 영향을 미치게 된다.

2. 메모리 사용: 새로운 함수가 생성될 때마다 메모리에서 새로운 함수 객체가 할당되므로, 메모리 사용량이 증가할 수 있다. 큰 규모의 애플리케이션에서 관리되어야 하는 부분이 될 수 있다.

3. 성능 저하: 함수가 자주 재생성되면, 불필요한 리렌더링이 발생하여 성능에 영향을 줄 수 있다. 특히 자식 컴포넌트에 함수를 props로 전달할 때, 부모 컴포넌트에서 함수가 재생성되면 자식 컴포넌트가 불필요하게 리렌더링될 수 있다.

함수 재생성이 필요한 경우는?

• 의존성 변경 시: 함수가 특정 상태나 props에 의존할 때, 해당 상태나 props가 변경될 때마다 새로운 함수가 생성되도록 하는 것이 유용할 수 있다. (새로운 값에 반응하도록 하는데 도움)

• 컴포넌트 최적화: 렌더링이 필요한 경우에만 함수를 다시 생성하여 성능을 최적화할 수 있다. useCallback을 활용하여 특정 의존성이 변경될 때만 함수를 재생성하도록 하는 방식으로 구현된다.

• 함수 재생성이 필요한 경우라면 적절한 상황에서 활용하여 성능을 최적화하는 것이 좋다.