useMemo

왜 useMemo를 쓸까요?

React에서는 부모가 렌더링 되면 자식 요소도 같이 렌더링이 됩니다.

이렇게 되면 불필요한 렌더링이 발생할 수 있습니다.

 

아래의 코드를 예시를 들어봅시다.

import React, { useState } from 'react';

const getDoubleValue = (num) => {
  return num * 2; 
};

const WithoutMemo = () => {
  const [count, setCount] = useState(0);
  const doubleValue = getDoubleValue(count);

  return (
    <div>
      <p>Double Value: {doubleValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
    </div>
  );
};

 

WithoutMemo 컴포넌트가 렌더링될 때마다 getDoubleValue 함수가 호출되어 결과를 계산합니다.

이는 count 상태가 변경될 때뿐만 아니라 부모 컴포넌트가 리렌더링되거나 다른 상태가 변경될 때도 발생합니다.

이는 불필요한 연산을 매번 수행하게 만듭니다.

 

이런 경우에 useMemo를 넘겨주면 불필요한 렌더링을 막을 수 있습니다.

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

const getDoubleValue = (num) => {
  return num * 2;
};

const WithMemo = () => {
  const [count, setCount] = useState(0);
  const doubleValue = useMemo(() => getDoubleValue(count), [count]);

  return (
    <div>
      <p>Double Value: {doubleValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
    </div>
  );
};

 

이렇게 되면 WithMemo 컴퍼넌트에서는 useMemo를 사용하여  count가 변경될 때만 getDoubleValue를 계산합니다.

부모 컴퍼넌트의 리렌더링이나 다른 상태의 변경으로 인해 컴퍼넌트가 리랜더링 될때 불필요한 렌더링을 줄일 수 있습니다.

 

그렇다면 성능최적화를 위해서 useMemo를 마음껏 사용하면 되나요?

그렇지 않습니다.

메모이제이션이라는 것도 계산 비용이 들기 때문에, 단순한 값 전달에 무작위로 사용하게 되면 오히려 성능 저하가 올 수 있습니다.

복잡한 계산이나, 비동기 함수처리 할 때 사용하는 걸 추천합니다.