React의 성능 최적화를 위한 React.memo 이해

React.memo는 불필요한 재렌더링을 방지하여 React 구성 요소의 성능을 최적화하는 데 도움이 되는 고차 구성 요소(HOC)입니다. 이는 기능적 구성 요소를 메모하는 데 사용됩니다. 즉, React는 props가 변경되지 않은 경우 구성 요소를 다시 렌더링하는 것을 건너뜁니다. 이는 다시 렌더링하는 데 비용이 많이 들 수 있는 대규모 React 애플리케이션의 성능 최적화에 특히 유용합니다.

React.memo 작동 방식

React.memo는 구성 요소의 props를 얕은 비교를 수행하여 작동합니다. props가 이전 렌더링과 동일하면 React는 구성 요소 렌더링을 건너뛰고 대신 이전 렌더링의 결과를 사용합니다. 이렇게 하면 특히 대규모 목록이나 값비싼 구성 요소를 렌더링할 때 다시 렌더링 횟수를 크게 줄이고 성능을 향상할 수 있습니다.

통사론

const MemoizedComponent = React.memo(Component);

장소:

• 컴포넌트는 메모하고 싶은 기능적인 컴포넌트입니다.
• MemoizedComponent는 컴포넌트의 새로운 메모 버전입니다.

예: React.memo의 기본 사용법

React.memo를 어떻게 사용할 수 있는지 간단한 예를 살펴보겠습니다.

import React, { useState } from 'react';

const ChildComponent = React.memo(({ name }) => {
  console.log("Child component re-rendered");
  return <div>Hello, {name}!</div>;
});

function App() {
  const [name, setName] = useState('John');
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildComponent name={name} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default App;

설명:

• ChildComponent는 React.memo에 싸여 있습니다. name prop이 변경된 경우에만 다시 렌더링됩니다.
• App에는 이름과 개수라는 ​​두 가지 상태가 있습니다. "Increment Count" 버튼을 클릭해도 name prop이 변경되지 않으므로 카운트 상태가 업데이트될 때 ChildComponent가 다시 렌더링되지 않습니다.
• "Change Name"을 클릭하면 name prop이 변경되어 ChildComponent가 다시 렌더링됩니다.

산출:

• "Increment Count" 버튼을 클릭하면 ChildComponent가 다시 렌더링되지 않지만 name prop이 변경되면 "Child Component re-rendered"를 기록합니다.

React.memo와의 사용자 정의 비교

기본적으로 React.memo는 props에 대한 얕은 비교를 수행하지만 props 비교 방법을 더 세밀하게 제어해야 하는 경우 사용자 정의 비교 기능을 제공할 수 있습니다.

사용자 정의 비교 함수는 구성요소가 다시 렌더링되지 않으면 true를 반환하고, 다시 렌더링해야 하면 false를 반환해야 합니다.

예: 사용자 정의 비교 함수

const ChildComponent = React.memo(
  ({ name, age }) => {
    console.log("Child component re-rendered");
    return <div>Hello, {name}, {age}!</div>;
  },
  (prevProps, nextProps) => {
    // Custom comparison: only re-render if name changes
    return prevProps.name === nextProps.name;
  }
);

function App() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);

  return (
    <div>
      <ChildComponent name={name} age={age} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setAge(age + 1)}>Increment Age</button>
    </div>
  );
}

이 예에서 ChildComponent는 사용자 정의 비교 기능 덕분에 나이 속성이 변경되더라도 name 속성이 변경될 때만 다시 렌더링됩니다.

React.memo를 사용해야 하는 경우

• 성능 최적화: props를 받고 자주 변경되지 않는 기능적 구성 요소가 있는 경우 React.memo를 사용하면 불필요한 렌더링을 방지할 수 있습니다.
• 목록 렌더링: 소수의 요소만 변경되는 대규모 목록의 경우 React.memo가 매우 유용할 수 있습니다. 예를 들어 항목 목록을 렌더링할 때 각 목록 항목 구성 요소를 메모하면 변경되지 않은 항목이 다시 렌더링되지 않습니다.
• 비싼 구성 요소: 구성 요소에 비용이 많이 드는 렌더링 로직(예: 복잡한 계산 또는 무거운 데이터 렌더링)이 있는 경우 React.memo를 사용하면 불필요한 재계산을 방지하여 전반적인 성능을 향상시킬 수 있습니다.

React.memo를 사용하지 말아야 할 경우

• 작은 구성요소: 소품이 거의 없는 작은 구성요소의 경우 React.memo를 사용하면 상당한 성능 향상 없이 오버헤드가 추가될 수 있습니다.
• 자주 변경되는 Props: 구성 요소가 자주 변경되는 Prop을 수신하는 경우 구성 요소가 어쨌든 다시 렌더링되므로 React.memo는 큰 이점을 제공하지 못할 수 있습니다.
• 복잡한 비교 논리: 사용자 정의 비교 논리는 구성 요소를 정상적으로 다시 렌더링하도록 허용하는 것보다 비용이 더 많이 들 수 있습니다. 꼭 필요한 경우에만 사용하세요.

결론

React.memo는 기능적 구성요소의 불필요한 재렌더링을 방지하기 위한 React의 간단하면서도 강력한 최적화 도구입니다. 구성 요소를 메모하고 얕은 prop 비교(또는 사용자 지정 비교 기능)를 사용하면 React는 prop이 변경되지 않은 경우 해당 구성 요소의 렌더링을 건너뛸 수 있어 특히 규모가 크거나 복잡한 애플리케이션에서 성능이 향상됩니다.

위 내용은 React의 성능 최적화를 위한 React.memo 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!