useMemo in React

안녕하세요, 오늘은 React를 사용하실 때 우리의 코드 최적화에 큰 도움을 주는 useMemo에 대해 상세하게 알아보겠습니다! 

 

useMemo의 정의 useMemo는 React 컴포넌트에서 메모이제이션(Memoization)을 구현하는 Hook입니다. 메모이제이션이란, 입력값이 동일한 경우 이전에 계산한 결과를 재사용함으로써 성능을 개선해주는 기술입니다. useMemo는 주로 렌더링과 관련된 값을 기억하여 불필요한 렌더링을 줄여 성능을 개선할 수 있도록 도와줍니다.

useMemo와 Hook의 상관 관계 useMemo는 React Hooks 중 하나로, 함수형 컴포넌트에서 사용되는 기능입니다. Hooks는 함수형 컴포넌트에서도 클래스 컴포넌트처럼 상태 관리와 생명주기 메서드를 사용할 수 있도록 도와주는 역할을 합니다.

사용 방법 useMemo는 다음과 같은 형태로 사용합니다.

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

여기서 첫 번째 인자에는 메모이제이션을 적용할 함수를, 두 번째 인자에는 언제 메모이제이션된 값을 갱신할지를 결정하는 디펜던시(Dependency) 배열을 전달합니다. 디펜던시 배열의 원소가 변경되면, 메모이제이션된 값이 다시 계산됩니다.

1. 기존 컴포넌트와 차이

적용 전:

function MyComponent({ a, b }) {
  const value = computeExpensiveValue(a, b);
  // ... (데이터를 사용하는 로직)
}

적용 후:

function MyComponent({ a, b }) {
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  // ... (데이터를 사용하는 로직)
}

• useMemo는 주로 다음과 같은 상황에서 사용됩니다.
• 계산 비용이 높은 함수의 결과를 메모이제이션할 때
• 컴포넌트 프로퍼티로 전달되는 참조 타입의 데이터를 메모이제이션할 때
• 불필요한 리렌더링을 피해야 하는 자식 컴포넌트에게 전달하는 값이나 함수를 생성할 때
• 리스트에서 특정 조건의 아이템만 필터링하기
• 배열의 합계, 평균 등 여러 정보를 계산하여 표시하기 예시
• 부모 컴포넌트의 상태에 따라 자식 컴포넌트가 불필요하게 리렌더링 되지 않도록 하기

 

useMemo 사용 시 주의 사항

• useMemo는 성능 최적화를 위한 도구이므로, 무분별하게 사용하면 오히려 성능이 저하될 수 있습니다.
• useMemo로 메모이제이션된 값을 변경하려면 디펜던시 배열에 의존성을 추가해야 합니다.

 

useMemo 사용 팁

• 메모이제이션을 적용할 함수를 정의할 때, 작은 단위의 순수 함수로 작성하는 것이 좋습니다.
• 디버깅 도구를 활용하여 불필요한 리렌더링을 확인하고 최적화할 수 있는 상황을 찾아내세요.

 

useCallback이란?

useCallback은 메모이제이션을 통해 함수를 기억하고, 함수 컴포넌트 내에서 인수가 변경될 때만 함수를 새로 생성하는 Hook입니다. 이를 통해 불필요한 함수 생성을 줄이고 성능을 개선할 수 있습니다.

 

useMemo와 useCallback의 차이점

useMemo와 비슷한 기능을 수행하는 Hook인 useCallback이 있습니다. 이 둘의 차이점은 useMemo는 값을 메모이제이션하는 방식으로 동작하고, useCallback은 함수 자체를 메모이제이션하는 방식으로 동작한다는 점입니다. 따라서 useMemo는 값이나 객체를 반환하고, useCallback은 함수를 반환합니다.

useMemo: 계산 비용이 높은 함수의 결과나 객체, 배열 등의 값을 최적화하고 싶을 때 사용합니다.

useCallback: 이벤트 리스너나 자식 컴포넌트에 전달되는 함수 등을 최적화하고 싶을 때 사용합니다.

 

useMemo와 useCallback은 React의 Hooks 중 하나로, 비효율적인 연산이나 불필요한 렌더링을 방지하는데 도움이 됩니다.

useMemo

useMemo는 메모이제이션된 값을 반환합니다. 이 Hook은 비싼 계산량을 가진 함수의 반환값을 '기억'하고 있다가, 의존성 배열에 있는 값들이 변하지 않았다면 이전에 계산한 값을 재사용합니다.

import React, { useMemo } from 'react';

function ExpensiveComponent({ num }) {
  const expensiveValue = useMemo(() => {
    let value = 0;
    for (let i = 0; i < num * 100; i++) {
      value += i;
    }
    return value;
  }, [num]); // num 값이 변경되었을 때만 expensiveValue를 다시 계산

  return <div>{expensiveValue}</div>;
}

useCallback

useCallback은 메모이제이션된 콜백 함수를 반환합니다. useMemo와 마찬가지로 의존성 배열에 있는 값들이 변하지 않았다면 이전에 생성한 함수를 재사용합니다. 주로 리렌더링 시 매번 새롭게 생성되는 함수를 방지하고자 할 때 사용됩니다.

import React, { useState, useCallback } from 'react';

function ButtonComponent() {
  const [count, setCount] = useState(0);

  const incrementCount = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count 값이 변경되었을 때만 incrementCount 함수를 다시 생성

  return (
    <div>
      Count: {count}
      <button onClick={incrementCount}>Increase</button>
    </div>
  );
}

위 예시에서 incrementCount 함수는 count 상태가 변경될 때마다 재생성됩니다. 만약 해당 컴포넌트가 자주 리렌더링된다면 매번 새로운 함수가 생성되어 성능 저하를 일으킬 수 있습니다. 이런 경우 useCallback을 사용하여 count 값 변화 시에만 새로운 함수를 생성하도록 최적화할 수 있습니다.