Memoization과 useMemo(), React.memo()

0. Memoization이란

이미 계산한 연산의 결과 값을 기억해두고, 동일한 계산을 실행하면 다시 연산하지 않고 기억한 결과값을 반환하는 방법
따라서 memoization을 통해 연산 과정을 최적화 시킬 수 있음

1. useMemo()

부모가 리렌더링 되거나 스테이트가 변하거나 등등으로 리렌더링 되면서 특정 연산 과정이 또 일어나는 경우가 있음
이런 부분을 useMemo(콜백함수 , [])를 사용해서 []안의 값이 변화하지 않는 이상, 값을 또 연산하지 않고 기억한 값을 반환하게 해주면됨

// App.js
const getDiaryAnalysis = useMemo(() => {
    console.log("일기분석시작");
    const goodCount = data.filter((i) => i.emotion >= 3).length;
    const badCount = data.length - goodCount;
    const goodRatio = parseInt((goodCount / data.length) * 100);
    return { goodCount, badCount, goodRatio };
  }, [data.length]);
  const { goodCount, badCount, goodRatio } = getDiaryAnalysis;

특징은 함수를 반환하는 것이 아니라 그 콜백함수의 return 값을 반환하기 때문에 값 자체로서 사용해주면 된다는 점.

useMemo를 잘 활용하여 연산의 최적화를 신경쓰자.

2. React.memo()

React.memo는 React 컴포넌트의 성능 최적화를 위한 Higher Order Component (HOC)= 고차컴포넌트다. HOC는 이전에 렌더링된 결과를 저장하고, 이전 렌더링 결과와 현재 렌더링 결과를 비교해서 동일하면 이전 결과를 재사용함. 이를 통해 동일한 렌더링 결과를 다시 계산하지 않고 성능을 향상시킬 수 있음.

예를 들어

function MyComponent({ data }) {
  return (
    <div>
      {data.map(item => (
        <Item key={item.id} item={item} />
      ))}
    </div>
  );
}

이 컴포넌트는 data라는 배열을 props로 받아와서, 배열의 각 요소를 Item 컴포넌트로 렌더링함. 하지만, 이 컴포넌트는 data가 변경될 때마다 다시 렌더링되기 때문에 data가 큰 경우 성능상 문제가 발생할 수 있음. 이를 개선하기 위해, React.memo를 사용하여 컴포넌트를 최적화할 수 있습니다.

const MyComponent = React.memo(({ data }) => {
  return (
    <div>
      {data.map(item => (
        <Item key={item.id} item={item} />
      ))}
    </div>
  );
});

이렇게 React.memo를 사용하면, data가 변경되지 않으면 이전 렌더링 결과를 재사용함. 따라서 data가 변경되지 않으면 MyComponent가 다시 렌더링되지 않으니 컴포넌트를 재사용해서 성능 최적화ㅇㅇ