[React] Hooks - useMemo (최적화하기)

[React] Hooks - useMemo (최적화하기)

 

📌 컴포넌트는 언제 렌더링되는가

컴포넌트는

1. 자신의 state 가 변경되거나,
2. 자신의 props 가 변경되거나,
3. 상위 컴포넌트가 리렌더될 때

렌더링이 일어나게 된다.

 

📌 useMemo 를 사용하는 이유

✅ 리액트는 다시 렌더링될 때마다 구성요소의 전체를 다시 실행한다.

위에서 본 바와 같이 컴포넌트의 렌더링은 한번이 아닌 계속해서 일어날 수 있다.

상위 컴포넌트가 리렌더링되거나 자신의 props, state 가 변경되었을 때 리렌더링된다.

 

이렇게 매번 리렌더링이 일어날 경우 간단한 구조라면 렌더링이 빠르겠지만, 무거운 페이지 전체를 리렌더링한다는 것은 성능 측면에서 좋지않다.

따라서 데이터의 변경이 없는 경우라면 리렌더링하지 않고, 데이터의 변경이 있는 경우에만 렌더링하게 해줘 최적화를 해줘야한다!

 

불필요한 리렌더링이 일어나는 컴포넌트에 useMemo 를 사용해보자!

 

📌 useMemo

✅ useMemo 는 메모이제이션(Memoization)된 값을 반환한다.

메모이제이션(Memoization) 이란?
이전에 실행했던 연산을 기억해 재활용하여 연산을 최적화하는 것

const cachedValue = useMemo(calculateValue, dependencies)

 

✅ 의미없는 리렌더링을 최소화한다. 

리액트는 최신의 deps(dependency, 의존성)와 deps 를 비교한다.

deps 가 변경되지 않은 경우에는 이전 연산을 반환하고, deps 가 변경된 경우에는 연산을 다시 실행하고 새로운 값을 반환한다.

즉, useMemo 는 deps 배열이 변경될 때까지 이전의 연산을 저장해놓는 역할을 한다.

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

두번째 인자(deps 배열)가 없는 경우 매 렌더링마다 같이 렌더링된다.

 

✅ useMemo 로 전달된 함수

useMemo 로 전달된 함수는 렌더링 중에 실행되기 때문에 렌더링 중에 일어나면 안 되는 일들을 이 함수 내부에 넣으면 안 된다.

예를 들어, Side Effect 는 useEffect 에서 일어나는 일이기 때문에 useMemo 의 함수에 사용하면 안된다.

 

✅ 함수 안에서 참조되는 모든 값은 deps arr 에 적어줘야 한다.

만약 참조하는 값이 있는데 deps arr 안에 넣지 않은 경우에는 최신의 값을 반영할 수 없을 수도 있다.

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

deps arr 에 a 만 적어줄 경우 a 는 최신 데이터로 업데이트되지만, b 는 최신의 값임을 보장할 수 없다.

 

📌 useMemo 사용하기

✅ import

import { useMemo } from "react";

react 에서 useMemo 를 꺼내준다.

 

✅ useMemo

const fastFunction() = useMemo(slowFunction(), [words]);

위와 같이 함수 전체에 useMemo 로 감싸도 되지만, 함수가 길어질 경우 전체를 감싸는게 불편할 수도 있다.

따라서 함수를 useMemo 의 첫번째 인자로 넣어주고, 두번째 인자로 deps arr 를 지정해주면 된다.

 

✅ 공식 문서 예제

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab)
    ,[todos, tab]
  );
  // ...
}

 

📌 과도한 useMemo 남용은 말자

useMemo 를 불필요하게 많이 사용할 경우 컴포넌트의 복잡성이 높아진다.

이로 유지보수가 어려워지고 만다.

useMemo 는 메모이제이션을 하기 때문에 가비지 컬렉션에서 제외되므로 프로젝트에서 메모리를 더 차지하게 된다.

 

React Hooks: useMemo 사용법

 

 

---

참고 : 리액트 공식 문서, 프론트엔드 기술블로그 GitBook
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.