[React] 컴포넌트 재렌더링 방지 최적화: React.memo 사용 예제

리액트에서 부모 컴포넌트의 일부 정보가 변동되어 렌더링이 다시 되는 과정에서

자식 컴포넌트도 기본적으로는 다시 렌더링되게 됩니다.

 

그러나, 항상 자식 컴포넌트들이 지속적으로 렌더링되어 불필요한 과정이 많다면

효율성이 좋지 않고 긴 지연 시간을 발생시킬 수 있습니다.

 

이 과정에서 자식 컴포넌트가 변경되지 않았을 때는, 자식 컴포넌트의 재렌더링을

방지하여 최적화를 할 수 있는 기능을 React.memo가 제공하고 있습니다.

 

이번 글에서는 React.memo 기능의 사용 방법을 간단한 예제를 통하여

이해를 해보는 시간을 가져보도록 하겠습니다.

 

 

기본 사용 예제

React.memo에는 자식 컴포넌트의 선언 시에 감싸주는 방식으로 선언을 진행하면 되며,

기본적으로 자식 컴포넌트의 props가 변경되었는지 여부를 판단하여

재렌더링 여부를 결정하여 사용되게 됩니다.

 

아래의 예시 코드를 살펴보도록 하겠습니다.

import React from 'react';

// 자식 컴포넌트
const MyComponent = React.memo(function MyComponent({ name, age }) {
  console.log('MyComponent 렌더링');
  return (
    <div>
      {name} - {age}
    </div>
  );
});

// 부모 컴포넌트
function ParentComponent() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <MyComponent name="Jimmy" age={28} />
    </div>
  );
}

 

Mycomponent는 ParentComponent의 자식 컴포넌트이며,

React.memo 기능을 이용하여 선언이 된 점을 확인할 수 있습니다.

 

위의 예시에서 count만 증가한 경우에는 ParentComponent가 다시 렌더링이 될 텐데

이 경우 Mycomponent의 props(name이나 age)가 변경된 것이 아니므로

재렌더링을 방지할 수 있게 됩니다.

 

만일 name이나 age 값이 변경된 경우에는 Mycomponent도 다시 렌더링이 진행됩니다.

 

 

심화 사용 예제(재렌더링 기준 커스텀)

만일, props로 전달되는 객체가 복잡한 경우, 비교 과정이 병목이 되어

위의 기본 예제는 성능 최적화에 그다지 도움이 되지 않을 수도 있습니다.

 

이런 경우, props의 특정 조건만을 비교하여 재렌더링이 되는 기준을

커스텀하는 방법이 있습니다.

 

사용 방법은 React.memo(자식 컴포넌트, 비교 함수) 형태로 선언을 진행하시면 됩니다.

 

사용 예제 코드는 다음와 같습니다.

import React from 'react';

// 자식 컴포넌트
const MyComponent = ({ user }) => {
  console.log('MyComponent 렌더링');
  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
};

// 커스텀 비교 함수
const areEqual = (prevProps, nextProps) => {
  // user 객체의 name만 비교하고 age는 무시
  return prevProps.user.name === nextProps.user.name;
};

// React.memo로 자식 컴포넌트 선언
const MemoizedMyComponent = React.memo(MyComponent, areEqual);

// 부모 컴포넌트
const ParentComponent = () => {
  const [user, setUser] = React.useState({ name: 'Jimmy', age: 28 });
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
        Increase Age
      </button>
      <MemoizedMyComponent user={user} />
    </div>
  );
};

export default ParentComponent;

 

여기서는 자식 컴포넌트인 Mycomponent의 props에서 user의 age 속성 정보만 변한 경우엔

재렌더링이 이루어지지 않고,

 

user의 name 속성 값만을 검사하여 해당 값이 변한 경우에만 렌더링이 다시 이루어지도록

만든 React.memo 커스텀 비교 함수 적용 예시입니다.

(즉, Increase Age 버튼을 누른 경우는 재렌더링이 진행되지 않게 됩니다.)

 

React.memo를 컴포넌트 선언 시에 적절하게 적용한다면 불필요한 렌더링을 방지하여

성능 최적화에 유용하지만,

모든 컴포넌트마다 전부 선언하는 등의 방식은 오히려 성능 감소를 야기할 수 있으므로

꼭 필요한 곳에만 적용시키는 것이 좋습니다.

 

이 글이 React.memo 활용 과정에 도움이 되셨기를 기원하겠습니다. 감사합니다.