배경

기본적으로 세가지 hook은 dependency 관계에 있는 변수 값이 변화하는 것에 연동되어 실행되는데, 구체적인 차이가 무엇인지 비교해보기

useEffect

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

• class component의 life cycle 함수(side effect)를 function component에도 동일하게 사용가능
• 최초 컴포넌트 마운트 되는 경우, 컴포넌트 내 레이아웃 배치와 랜더링이 완료된 후에 실행
• 두 번째 인자(배열)의 요소로 지정하면, 해당 요소 값의 업데이트 되는 경우에만 실행
• 그러나, state나 props를 dependency로 지정하면, 불필요한 랜더링 발생 가능

useCallback

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

• memoization 된 콜백(함수) 자체를 반환
• useCallback(fn, deps)은 useMemo(() => fn, deps)은 동일
• 의존성이 변경되는 경우, 이전에 기억하고 있던 함수 자체와 비교해서 다른 경우에만 리랜더

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• memoization 된 값을 반환
• 의존성이 변경되는 경우, 이전에 기억하고 있던 리턴 값과 비교해서 다른 경우에만 리랜더
• useMemo에서 전달된 함수는 랜더링 중에 실행되므로, 랜더링 중에서 실행하지 않는 함수는 useEffect를 사용할 것
• useRef와의 차이는, useRef는 DOM element의 특정 속성 값을 기억한다면, useMemo는 특정 함수의 리턴 값을 기억하는 것

참고 사이트

https://ko.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect