useCallback쓸래? useMemo쓸까? 걔네 똑같은거 아님?? - NO!!! 핵심적인 차이는??

guddls ju·2022년 9월 16일
0

React Hooks

목록 보기
3/3
post-thumbnail

useCallback과 useMemo는 얼핏보면 기능이 비슷해서 항상 헷갈린다. 이 둘의 차이점을 중심으로 언제 사용하면 더 좋을지 알아보자!


💡 useMemo

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

//공홈 예시 코드
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

💡 useCallback

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

//공홈 예시 코드
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo & useCallback 장점 : 메모리에 저장되어 있다가 변화하는 값만 바뀌는 방식으로, 메모리의 낭비를 막을 수 있다.


🧨 useMemo 와 useCallback의 차이점

useCallback을 사용한 코드를

// App.js
 const getItems = useCallback(
    increaseValue => {
      return [
        number + increaseValue,
        number + 1 + increaseValue,
        number + 2 + increaseValue,
      ]
    },
    [number]
  )

useMemo를 사용해서 작성해보면

// App.js

 const getItems = useMemo(
    () => increaseValue => {
      return [
        number + increaseValue,
        number + 1 + increaseValue,
        number + 2 + increaseValue,
      ]
    },
    [number]
  )

…똑같다??


사실상 useCallback(fn, deps) 는 useMemo(() => fn, deps) 와 같다.

🚧 why?!

useMemo는 함수를 반환하지 않고, 함수의 값만 memoization해서 반환 하기 때문! 그와 다르게 useCallback함수 자체를 memoization 해서 반환 한다. 이것이 바로 useMemouseCallback핵심적인 차이점이다.

= useCallback은 전달된 함수 그 자체를 캐싱하지만, useMemo는 전달된 함수가 실행되고 반환된 결과값을 캐싱한다.


🕵️‍♀️ 그렇다면 각 Hooks은 언제 사용해야 적절할까??

자식 컴포넌트에서 특정한 props 값들의 변화를 최적화시키고 싶을때는 useMemo를, 부모 컴포넌트에서 계산량이 많은 props함수를 자식 컴포넌트에게 넘겨줄 때는 useCallback을 사용하는 것이 맞다고 생각한다.


하지만 예제로 제시했던 코드들에서는 사실 useMemo와 useCallback을 사용하지 않아도 된다. 사용하지 않는게 더 낫다고 해야하나... 그 이유는 useMemo와 useCallback은 expensive한 연산과정에서 사용되어야 그 효과를 톡톡히 볼 수 있기 때문!

✋효과만 미미할 뿐 더 나은 것 아닌가?

NO! 왜냐하면 useCallback과 useMemo를 사용할 경우 해당 hook을 호출하고, 그 안에 들어갈 함수를 만들어 넘기고, 의존성 체크를 목적으로 추가적인 비용이 발생하기 때문이다. 더불어memoization을 해놓는 다는 것은 결국 그 값을 메모리에 할당해놓고 있다는 뜻이기에 여기서도 추가적인 비용이 발생한다고 볼 수 있다.

퍼포먼스 최적화는 컴퓨터의 어떠한 부분에서도 마찬가지겠지만 절대 공짜가 아니다. 컴퓨팅 자원, 개발자의 자원 등 어디선가 반드시 소모되는 자원이 있을 것이고, 이에 대해 잘 저울질하여 책임감 있게 최적화를 진행해야 한다고 생각한다.


참고

https://velog.io/@kysung95/짤막글-useCallback을-사용해보자

https://beautify-log.tistory.com/69?category=1007077

https://leego.tistory.com/entry/React-useCallback과-useMemo-제대로-사용하기

profile
효율에 미친자

0개의 댓글