React useCallback, useMemo

useCallback, useMemo 둘다 메모이제이션을 활용하는 것입니다.

메모이제이션 이란 동일한 계산을 반복할때 이전에 계산한 값을 가지고 있다가 같은 계산일 경우 이미 계산된 값을 반환하는 것입니다.

재귀함수에서 주로 사용합니다. (피보나치 함수와 같은 예시)

 

useCallback

메모이제이션된 콜백을 반환합니다.

useCallback을 이용하면 의존성 배열의 값이 바뀌지 않는 이상 callback은 재정의 되지 않습니다.

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

 

useCallback(fn, deps)는 useMemo(() => fn, deps)와 같습니다.

 

useMemo

메모이제이션된 값을 반환합니다.

리액트에서는 컴포넌트가 렌더링 될때마다 doSomething 함수를 실행시킬 것입니다.

doSomething이 비용이 비싼 함수라면(ex. 시간이 오래소요) 렌더링 시마다 실행이 되므로 렌더링 하는데 오래 걸릴수 있습니다.

의존성 배열이 변하는 순간에만 갱신된 값을 가질 수 있게 해줍니다.

 

배열이 존재하지 않으면 렌더링 때마다 새 값을 가지게 됩니다.

const callback = useMemo(() => doSomething(a,b), [a, b])

 

useCallback과 useMemo는 종종 성능의 최적화를 위하여 언급되곤 합니다.

정말 특수한 경우가 아니라면 둘을 사용함으로써 성능의 드라마틱한 변화를 이끌어내지는 못하지 않을까 생각됩니다.

근본적인 로직이 해결되지 않는다면 새로운 변수에 함수를 할당시켜주는 것, 함수의 반환값을 할당시켜주는 것은 크게 도움이 되지 않을것으로 예상합니다.

또한 성능에 대해 언급할때 어떤 기준으로 성능을 측정하느냐, 어떤 관점에서 성능을 바라보느냐에 따라서도 다른 기대값을 가지게 되지 않을까 생각합니다.

 

 

 

 

https://ko.reactjs.org/docs/hooks-reference.html#usecallback

Hooks API Reference – React