[React] useEffect와 useMemo 차이

useEffect와 useMemo는 React의 훅(Hook)이지만, 사용 목적과 동작 방식이 서로 다릅니다.

차이점 요약

• useEffect는 컴포넌트가 렌더링된 후에 실행되는 부수 효과를 다루는 데 사용됩니다.
• useMemo는 계산 비용이 높은 연산의 결과를 메모이제이션하여 성능을 최적화하는 데 사용됩니다.
• useEffect는 DOM 업데이트, 데이터 가져오기, 구독 설정과 같은 작업에 주로 사용됩니다.
• useMemo는 복잡한 계산이나 재계산을 피해야 하는 값의 계산에 주로 사용됩니다.

1. useEffect

• 목적: useEffect는 컴포넌트의 렌더링이 완료된 후에 부수 효과(side effects)를 수행하기 위해 사용됩니다. 부수 효과는 데이터 가져오기, 구독 설정, 수동으로 DOM 조작하는 것 등을 포함할 수 있습니다.
• 동작 방식: useEffect는 컴포넌트가 렌더링된 후에 실행됩니다. 종속성 배열(dependency array)을 제공하면, 해당 배열의 값이 변경될 때만 효과가 실행됩니다. 종속성 배열이 없는 경우, 컴포넌트가 렌더링될 때마다 효과가 실행됩니다.
• 예시:

  useEffect(() => {
    // API 호출 등의 부수 효과 수행
  }, [dependencies]); // dependencies가 변경될 때마다 실행

2. useMemo

• 목적: useMemo는 계산 비용이 많이 드는 연산의 결과 값을 메모이제이션(캐싱)하여 성능을 최적화하는 데 사용됩니다. 값이 변경될 필요가 없는 복잡한 계산의 결과를 재사용할 수 있습니다.
• 동작 방식: useMemo는 종속성 배열에 있는 값이 변경될 때만 메모이제이션된 값을 재계산합니다. 그 외의 경우에는 이전에 계산된 값을 재사용합니다.
• 예시:

  const memoizedValue = useMemo(() => {
    // 복잡한 계산 수행
    return computeExpensiveValue(a, b);
  }, [a, b]); // a 또는 b가 변경될 때만 재계산

두 훅 모두 종속성 배열을 통해 최적화를 수행할 수 있지만, 그 목적과 사용하는 시나리오가 다릅니다.