React Memo

React Memo?

React의 렌더링 성능을 최적화하기 위한 고차 컴포넌트(HOC, Higher-Order Component)이다. 원리를 이해하려면 React의 렌더링 과정을 먼저 이해해야 한다.

React 렌더링의 기본

React에서 상태나 props가 변경될 때마다 해당 컴포넌트는 다시 렌더링된다. 때로는 실제로 변경되지 않은 props나 상태에 대해서도 불필요하게 다시 렌더링되는 경우가 있을 수 있다. 이러한 불필요한 렌더링은 애플리케이션의 성능을 저하시킬 수 있다.

React.memo의 원리

React.memo는 컴포넌트에 대한 메모이제이션(memoization)을 제공는데 메모이제이션이란 주어진 입력에 대한 출력을 기억해 놓았다가, 동일한 입력이 다시 주어질 때 기존의 출력을 다시 사용하는 최적화 기법이다.

React.memo는 컴포넌트의 props를 이전 렌더링과 비교하고 props가 변경되지 않았다면, React는 컴포넌트를 다시 렌더링하지 않고 이전 렌더링의 결과를 재사용한다.

사용법

const MyComponent = React.memo(function MyComponent(props) {
  // 컴포넌트 로직...
});

주의점

1. 오버헤드: React.memo는 비교 로직을 실행하여 props의 변경을 감지한다. 때로는 이 비교 로직 자체가 오버헤드로 작용하여 성능을 저하시킬 수 있으므로, 실제로 성능 저하가 발생하는 부분에만 사용하는 것이 좋습니다.
2. 깊은 객체 비교: 기본적으로 React.memo는 얕은 비교(shallow compare)를 수행하기 때문에 객체의 깊숙한 내부 값이 변경되었을 때는 감지하지 못한다. 필요한 경우 비교 함수를 제공하여 깊은 비교를 수행할 수 있다.
3. 사용 케이스: 모든 컴포넌트에 React.memo를 적용하는 것은 권장되지 않는다. 불필요한 렌더링이 실제로 성능에 영향을 미치는 경우에만 사용해야 한다.

결론적으로, React.memo는 컴포넌트의 불필요한 렌더링을 방지하고 성능을 최적화하는 데 도움을 주는 유용한 도구이나 이를 무분별하게 적용하는 것은 반대의 효과를 가져올 수 있으므로 신중하게 사용해야 한다.