[React] 리액트 useMemo (성능 최적화)

React에서 컴포넌트가 리렌더링 될 때, 성능 최적화를 위해 때때로 계산이 많이 필요한 값이나 함수의 결과를 캐싱할 필요가 있습니다. 이때 useMemo 훅을 사용하면 불필요한 연산을 방지하여 성능을 개선할 수 있습니다.

 

 

react useMemo - 커버 이미지

목차

1. useMemo란?

2. useMemo 사용법

3. useMemo 의존성 배열

4. useMemo 사용 주의사항

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. useMemo란?

useMemo는 특정 계산의 결과를 메모이제이션하여, React가 불필요하게 해당 계산을 다시 실행하지 않도록 도와주는 훅입니다. useMemo는 컴포넌트가 리렌더링 될 때마다 실행되는 비싼 연산을 피하고자 할 때 사용됩니다. React는 해당 값이 바뀌지 않으면 이전에 계산된 값을 재사용합니다.

import {useMemo} from 'react';

function App() {
  const memoized = useMemo(() => calculation(a, b), [a, b]);
}

• useMemo는 첫 번째 인자로 비싼 연산을 수행하는 함수를 받고, 두 번째 인자로 의존성 배열을 받습니다.
• 리렌더링될 때 의존성 배열의 값들이 변경되지 않으면, 이전에 계산된 값을 그대로 재사용합니다.

 

2. useMemo 사용법

useMemo는 기본적으로 메모이제이션된 값을 반환합니다. 이를 통해 해당 값이 다시 계산되지 않도록 할 수 있습니다.

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

function calculation(a, b) {
  console.log('비싼 연산 실행 중...');
  return a + b;
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  // useMemo를 사용하여 calculation 함수의 결과를 메모이제이션
  const memoized = useMemo(() => calculation(count, 10), [count]);

  return (
    <div>
      <p>계산된 값: {memoized}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="텍스트 입력"
      />
    </div>
  );
}

export default MyComponent;

• 비싼 연산 함수: calculation 함수는 두 숫자를 더하는 단순한 계산이지만, 실제 애플리케이션에서는 훨씬 복잡할 수 있습니다. useMemo를 사용하지 않으면 컴포넌트가 리렌더링 될 때마다 이 계산이 반복됩니다.
• useMemo로 성능 최적화: useMemo는 count 값이 변경될 때만 calculation 함수를 다시 실행합니다. 즉, input이 변경될 때는 memoized는 다시 계산되지 않습니다.

 

3. useMemo 의존성 배열

useMemo의 두 번째 인자는 의존성 배열입니다. 의존성 배열에 있는 값이 변경될 때만 첫 번째 인자로 넘긴 함수가 다시 실행됩니다. 만약 의존성 배열을 비워 두면, 처음 컴포넌트가 마운트 될 때만 계산이 이루어지고, 그 이후로는 다시 계산되지 않습니다.

const memoized = useMemo(() => {
    return calculation(a, b);
}, [a, b]);

 

4. useMemo 사용 주의사항

 

1. 과도한 사용 피하기: useMemo는 불필요한 재계산을 방지하여 성능을 최적화하지만, 모든 계산에 이를 사용하는 것은 바람직하지 않습니다. 렌더링 성능에 큰 영향을 주는 계산에만 사용하는 것이 좋습니다.
2. 의존성 관리: useMemo는 의존성 배열에 기반하여 작동하기 때문에, 의존성 배열을 정확히 관리해야 합니다. 의존성 배열에 누락된 값이 있으면 메모이제이션이 올바르게 작동하지 않을 수 있습니다.
3. 리렌더링 문제: 메모이제이션을 사용하더라도, 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 리렌더링 될 수 있습니다. 이 경우 useMemo를 사용한다고 해서 모든 렌더링을 막을 수는 없습니다.

 

 

 

 

useMemo는 React 애플리케이션의 성능을 최적화할 수 있는 강력한 도구이지만, 필요할 때 적절히 사용해야 합니다.

• 복잡한 계산이 컴포넌트 내에서 자주 반복될 때
• 리스트의 필터링이나 정렬 작업 등에서 성능을 개선해야 할 때
• 렌더링 횟수를 줄이고 성능 최적화가 필요한 경우

 

 

추천글

[React] 리액트 생명 주기(Life Cycle)

[React] 리액트 useReducer