useCallback()

1. useCallback()이란?

• 함수를 정의한 컴포넌트 내부에서 사용할 때는 적절하지 않다. 하지만 함수를 자식 컴포넌트에 전달 할 때는 useCallback을 사용하는 것이 좋다.

• 자식 컴포넌트에 함수를 전달(전파)하게 되면 부모, 자식 모두가 함수를 계속해서 새롭게 렌더링 된다. 이는 성능최적화에 문제를 준다. → 동시성

• useCallback() 훅을 사용하면 해당 함수를 기억(memo)하고 있기 때문에 의존성 모듈이 변경 되기 전에는 다시 렌더링 되지 않는다.

• 컴포넌트가 업데이트 될 때 마다 불필요한 과정이 발생하지 않도록 설정한다.

왜 성능에 문제가 될까?

[] === [] // false

위의 두 배열은 빈 배열으로 같아 보이지만 다른 배열이다. 부모 컴포넌트에 정의된 함수가 자식 컴포넌트에 그대로 전파 되었을 때, 같은 함수처럼 보이지만 컴퓨터는 다른 함수라고 생각하고 렌더링한다. 이때 재조정(reconciliation) 문제가 발생한다.

주의!

• useCallback()은 종속성 배열을 필수로 갖는다.

• 종속성 배열엔 useCallback()이 의존하고 있는 모든 것을 넣는다.

  • [](빈배열)로 설정하면 1번만 그려진다.

  • [state, props]로 설정하면 state와 props가 변경될 때 다시 렌더링 된다.

2. useCallback() 작동 흐름

3. 비교

일반 콜백 함수

const handler = (e) => {
  // 핸들러 로직
}

메모된 콜백 함수

const handler = React.useCallback(
  (e) => {
    // 핸들러 로직
  }, 
  // 의존성 배열이 추가된 경우, 의존하는 상태 또는 데이터가 변경되었을 때만 업데이트
  []
)

메모된 콜백 함수는 GUI 렌더링, 스프라이트, 애니메이션 물리 등에 사용 되는 재귀 함수를 처리 할 때 사용하는 것이 좋다.