리액트 훅 useMemo란? : react

Memo is Memorization

memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.

memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다.

렌더링에 의해 발생하는 성능 저하

작성된 컴포넌트 함수는 React 앱에서 랜더링(rendering)이 일어날 때마다 호출이 된다.

컴포넌트 함수가 호출이 되면 그 안에 자바스크립트 로직들이 수행되고, 이를 기반으로 JSX로 마크업된 UI가 리턴되는 기본 구조를 가지고 있다.

React에서 컴포넌트의 랜더링은 한 번 일어나고 끝이 아니라 수시로 계속 일어날 수 있다.

대표적인 예로 컴포넌트의 자신의 상태 변경(state update)이 일어날 수 있고, 아니면 부모 컴포넌트의 상태 변경이 일어나 덩달아 함께 랜더링되야 하는 경우도 있다.

React에는 수동으로 다시 렌더링을 해주는 API도 있고, 사용자가 브라우저에서 새로고침을 할 때도 컴포넌트의 재 랜더링은 불가피 하다.

이러한 잦은 렌더링으로 인해 불필요한 로직의 연산이 중복으로 수행되기도 하는데, 이러한 성능 저하 문제를 해결하기 위하여 useMemo를 사용하게 된다.

useMemo

useMemo란 성능 최적화를 위하여 연산된 값을 재사용하는 기능을 가진 함수이다.

useMemo(함수, deps배열 ) 함수는 두개의 인자를 받는다.

1. 첫번째 파라미터에는 useMemo가 수행할 함수를 전달한다.

2. deps 배열을 전달한다. 쉽게 말해, 앞선 인자로 전달받은 함수가 사용할 파라미터를 담은 배열을 입력 해준다.

ex)

성능이 좋지 않은 기존의 컴포넌트

아래의 만일 아래의 compute함수가 어마어마한 양의 연산을 요구하는 함수라면,
컴포넌트가 렌더링 될 때마다 수행되기 때문에 불필요하고 큰 중복연산을 발생시켜 성능저하로 이어지게 될 것이다.

import React from "react";

function MyComponent({ x, y }) {
  const z = compute(x, y);
  return <div>{z}</div>;
}

useMemo 훅을 사용한 리팩토링

위의 컴포넌트를 useMemo를 사용하여 리팩토링한 모습이다.

만일 deps배열로 전달한 x,y 값이 변화한 경우에만 연산의 결과값인 z가 변하게 될 것이므로,
useMemo는 두번째 인자인 deps배열로 전달받은 값이 변화했을 때에만 연산을 수행하여 z를 갱신하게 된다.

import React, { useMemo } from "react";

function MyComponent({ x, y }) {
  const z = useMemo(() => compute(x, y), [x, y]);
  return <div>{z}</div>;
}

참조 : Dalseo - useMemo 사용법