리액트 성능 최적화의 기초: useMemo, useCallback, memo

리액트 생명주기 메서드와 함수형 컴포넌트 생명주기

함수형 컴포넌트에서는

useEffect, useState, useRef 등 훅(hooks)을 사용하여 생명주기를 관리할 수 있습니다.

생성 (Mounting)

• useEffect(() => { ... }, []): 의존성 배열을 빈 배열로 두면 컴포넌트가 마운트될 때 한 번 실행니다다.
  componentDidMount와 유사한 역할을 합니다.

업데이트 (Updating)

• useEffect(() => { ... }, [의존성]): 의존성 배열에 포함된 값이 변경될 때마다 실행됩니다. componentDidUpdate와 유사합니다.

제거 (Unmounting)

• useEffect(() => { return () => { ... }; }, []): useEffect의 반환 함수는 컴포넌트가 언마운트될 때 실행됩니다. componentWillUnmount와 유사합니다.

useMemo, useCallback, React.memo에 대해 설명하기

useMemo, useCallback, React.memo는 React에서 성능 최적화를 위해 자주 사용되는 도구들입니다.
이 세 가지는 각각 다른 목적을 가지고 있으며 때로는 함께 사용되기도 합니다.

1. useMemo

• 목적: 연산 비용이 높은 함수의 결과값을 캐싱하여 불필요한 재계산을 방지하기 위해 사용됩니다.
• 사용 시기: 특정 계산이 값의 변화에 따라 반복되지 않도록 하고 싶은 경우에 사용합니다.
• 구문:

  
  const memoizedValue = useMemo(() => 계산할_함수(), [의존성]);

  설명: useMemo는 특정 값(memoizedValue)을 계산할 때 의존성 배열에 있는 값들이 변경되지 않았다면 이전에 계산된 값을 반환합니다.
  렌더링 성능을 최적화하는 데 도움이 됩니다.
  예를 들어, 복잡한 계산이나 큰 데이터 구조의 변환이 자주 일어날 때 useMemo를 사용하여 불필요한 계산을 방지할 수 있습니다.

2. useCallback

• 목적: 함수의 참조값을 캐싱하여 불필요한 함수 재생성을 방지하기 위해 사용됩니다.
• 사용 시기: 특정 함수가 렌더링 시마다 동일한 참조값을 갖도록 하고 싶을 때 사용합니다.
• 구문:

  const memoizedCallback = useCallback(() => {
    실행할_함수();
  }, [의존성]);

  설명: useCallback은 주어진 함수를 메모이제이션합니다.
  의존성 배열에 있는 값들이 변경되지 않았다면, 동일한 함수 참조를 반환합니다.
  자식 컴포넌트에 콜백 함수를 props로 전달할 때 유용합니다.
  렌더링 시마다 새로운 함수가 생성되는 것을 방지하여 불필요한 리렌더링을 줄일 수 있습니다.

3. React.memo

• 목적: 불필요한 리렌더링을 방지하기 위해 컴포넌트의 렌더링을 최적화합니다.
• 사용 시기: 특정 컴포넌트가 동일한 props를 받는 경우에도 리렌더링되는 것을 방지하고 싶을 때 사용합니다.
• 구문:

  
  const MemoizedComponent = React.memo(컴포넌트);

  설명: React.memo는 고차 컴포넌트(Higher Order Component, HOC)로 함수형 컴포넌트를 감싸서 메모이제이션된 버전을 만듭니다.
  이전과 동일한 props를 받으면 해당 컴포넌트를 다시 렌더링하지 않습니다.
  React.memo는 얕은 비교를 사용하여 props가 변경되지 않은 경우 렌더링을 건너뜁니다.