[React.js] memo() 사용할 때 주의할 점

memo() 사용할 때 주의할 점

들어가며

• 리액트(React.js)의 @memo()@를 사용할 때 주의할 점을 정리해본다.

 

memo()

개념

• 함수형 컴포넌트를 메모이제이션(Memoization)하여 불필요한 리렌더링을 방지하는 역할을 한다.
• 주로 성능 최적화를 위해 사용된다.

import { memo } from 'react';

const MyComponent = memo(function MyComponent({ prop1, prop2 }) => {
  // ...
});

export default MyComponent;

 

• 기본적으로 컴포넌트의 @props@가 변경되지 않으면 컴포넌트를 다시 렌더링하지 않는다.
  • @props@의 얕은 비교(Shallow Comparison)를 통해 이루어진다.
    • 얕은 비교는 기본 자료형(숫자, 문자열 등)의 경우 값을, 객체나 배열 같은 참조형 자료형의 경우 참조 주소를 비교한다.

 

사용 시 주의할 점

• 컴포넌트 트리의 가능한 높은 수준에 위치한 컴포넌트에만 사용한다.
• 모든 컴포넌트에 @memo@를 적용하는 것은 좋지 않다. @prop@ 값이 자주 변경되는 컴포넌트에 사용하지 않는다.
  • @memo@는 @prop@ 값을 비교하는 데 비용이 들기 때문에, 항상 @prop@ 값이 변경되는 컴포넌트에 적용하면 오히려 성능이 저하될 수 있다.

 

예제 코드

import { useState, memo } from "react";

// ...

const Counter = memo(function Counter({ initialCount }) {
  log("<Counter /> rendered", 1);
  const initialCountIsPrime = isPrime(initialCount);

  const [counter, setCounter] = useState(initialCount);

  function handleDecrement() {
    setCounter((prevCounter) => prevCounter - 1);
  }

  function handleIncrement() {
    setCounter((prevCounter) => prevCounter + 1);
  }

  return (
    // ...
  );
});

export default Counter;