소개

반응 응용 프로그램은 종종 큰 데이터 세트 및 복잡한 구성 요소를 다루며 불필요한 재 렌즈가 성능에 크게 영향을 줄 수 있습니다. 이를 해결하기 위해 React는 부품을 최적화하고 렌더링 시간을 줄이는 간단하지만 강력한 도구 인 React.Memo를 제공합니다. 이 안내서에서는 반응 메모의 작동 방식, 유용한 이유 및 단계별로 구현하는 방법을 살펴 보겠습니다.

React 메모 란 무엇입니까?

React.Memo는 기능적 구성 요소를 추억화하는 데 도움이되는 React의 고차원 구성 요소 (HOC)입니다. 메모 삽입은 입력을 기반으로 함수의 출력을 캐싱하는 프로세스이므로 함수는 동일한 입력에 대해 결과를 다시 작성할 필요가 없습니다. React Memo는 비슷하게 작동합니다. 구성 요소의 마지막 렌더링 출력을 "기억하고 소품이 변경 될 때만 다시 렌더링합니다.

왜 메모에 반응합니까?

---

RECT의 구성 요소는 부모 구성 요소가 다시 렌더링 될 때마다 재 렌더링됩니다. 구성 요소의 출력이 부모의 변경에 의존하지 않으면 비 효율성이 발생할 수 있습니다. 예를 들어, 많은 구성 요소가있는 복잡한 UI에서는 과도한 재 렌즈로 인해 지연이 나타날 수 있습니다. React 메모를 사용하면 필요한 경우 구성 요소 만 업데이트하여이를 최적화 할 수 있습니다.

문제가 반응 메모 해결

1. 불필요한 재 렌즈

부모 구성 요소가 다시 렌더링되면 자식 구성 요소도 다시 렌더링됩니다. 이로 인해 성능 병목 현상이 발생할 수 있습니다. 특히 구성 요소가 정적 데이터를 표시하거나 변하지 않는 소품에 의존 할 때

---

2. 복잡한 UIS에서 느리거나 느린 성능

깊게 중첩 된 구성 요소가있는 응용 프로그램은 누적 리 렌더로 인해 느린 성능에 직면 할 수 있습니다. REACT 메모와 함께 Memoization은 업데이트가 필요하지 않은 구성 요소의 렌즈를 방지하여 앱의 응답 성을 향상시키는 데 도움이됩니다.

반응 메모 작동 방식 : 단계별 예

React 메모의 기본 구현을 살펴 보겠습니다. 우리는 메모 삽입을 사용하지 않는 간단한 구성 요소부터 시작하여 React 메모를 추가하는 방법을 확인합니다.

1 단계 : React 메모없이 간단한 카운터 구성 요소 설정

---

import Rect, {usestate} 'react'; 함수 카운터 ({count}) { Console.log ( '카운터 구성 요소 재 렌더링'); 반환

count : {count}

; } 기능 앱 () { const [count, setCount] = usestate (0); const [text, settext] = usestate ( ''); 반품 ( ); } 기본 앱 내보내기;

설명

이 예에서는 입력 필드를 입력 할 때마다 카운터 구성 요소가 다시 값을 재 값으로 유지하더라도 다시 렌더링합니다. 이것은 반응 메모로 방지 할 수있는 불필요한 재 렌더입니다.

2 단계 : React 메모로 최적화

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

이제 카운터 구성 요소를 React.Memo로 래핑하여 최적화하겠습니다.

import Rect, {usestate} 'react'; const counter = react.memo (함수 카운터 ({count}) { Console.log ( '카운터 구성 요소 재 렌더링'); 반환

count : {count}

; }); 기능 앱 () { const [count, setCount] = usestate (0); const [text, settext] = usestate ( ''); 반품 ( ); } 기본 앱 내보내기;

설명

react.memo를 사용하여 카운터 구성 요소는 카운트 소품이 변경되는 경우에만 다시 렌더링됩니다. 이제 입력 필드에 입력하면 더 이상 카운터 리 렌더가 트리거되어 성능을 크게 최적화합니다.

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

React 메모의 실제 이점을보기 위해보다 복잡한 예를 들어 보자. 각 항목 옆에 "좋아요"버튼이있는 항목 목록이 있다고 가정합니다. 개별 항목을 좋아할 때 React 메모가 과도한 재 렌더를 방지 할 수있는 방법을 보여줍니다.

1 단계 : 메모없이 목록 구성 요소를 만듭니다

---

import Rect, {usestate} 'react'; 함수 항목 ({item, onlike}) { console.log (```rendering $ {item.name}}); 반품 ( ); } 함수 itemList () { const [항목, setitems] = usestate ([[ {id : 1, 이름 : '항목 1', 좋아요 : 0}, {id : 2, 이름 : '항목 2', 좋아요 : 0}, {id : 3, 이름 : '항목 3', 좋아요 : 0}, ]); const handlelike = (id) => { setitems ((previtems) => previtems.map ((항목) => item.id === id? {... 항목, 좋아요 : item.likes 1} : 항목 )) ); }; 반품 ( ); } 내보내기 기본 항목 목록;

문제

위의 코드에서 하나의 항목을 좋아할 때 모든 항목이 하나의 항목 만 좋아하더라도 다시 렌더링됩니다.

2 단계 : React 메모로 항목 구성 요소를 최적화하십시오

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like
    
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes   1 } : item
      )
    );
  };

  return (
    

      {items.map((item) => (
        
      ))}
    
  );
}

export default ItemList;

const item = react.memo (함수 항목 ({item, onlike}) { console.log (```rendering $ {item.name}}); 반품 ( ); });

결과

이제 원하는 항목 만 리 렌더링하여 UI를 훨씬 빠르고 효율적으로 만듭니다.

const Item = React.memo(function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    

      
{item.name}
       onLike(item.id)}>Like ({item.likes})
    
  );
});

React Memo는 특정 시나리오에서 유용하지만 모든 곳에서 사용하면 실제 이점을 추가하지 않고도 코드를 복잡하게 할 수 있습니다. 다음은 특히 효과적 일 수있는 몇 가지 주요 상황입니다.

---

정적 구성 요소

: 헤더 나 바닥 글과 같이 자주 변하지 않는 구성 요소.

순수한 기능 구성 요소

: 렌더링을위한 소품에만 의존하는 구성 요소.
1. 큰 구성 요소 목록
: 불필요한 재 렌더를 피해야하는 많은 항목이있는 목록.
잠재적 인 함정과 모범 사례

얕은 비교

---

: React 메모는 얕은 비교를 수행하므로 깊게 중첩 된 물체 나 배열의 변화를 감지하지 못합니다. 복잡한 소품을 통과하는 경우 USEMEMO 또는 USECALLBACK 사용을 고려하십시오.

1. Performance Monitoring : React DevTools를 사용하여 실제로 메모리에 어떤 구성 요소가 혜택을 받는지 식별하십시오. 반응 메모를 과도하게 사용하면 무시할만한 성능 이득으로 코드 복잡성을 초래할 수 있습니다.

2. 자주 묻는 질문 (FAQ) Q1 : React 메모는 Usememo 및 Usecallback과 어떻게 다릅니 까?

---

반응 메모

소품을 기반으로 구성 요소 리 렌더를 최적화합니다.

USEMEMO

구성 요소 내에서 계산 된 값을 캐시합니다.
• USECALLBACK
기능은 함수를 캐시하여 모든 렌더링에서 재현되지 않습니다.
• Q2 : 클래스 구성 요소와 함께 React 메모를 사용할 수 있습니까?
• 아니요, 반응 메모는 기능 구성 요소에만 해당됩니다. 그러나 클래스 구성 요소의 경우 PureComponent로 유사한 동작을 달성 할 수 있습니다.
결론

React Memo는 불필요한 재 렌즈를 줄이고 응용 프로그램 성능을 향상시키는 귀중한 도구입니다. 순수한 기능 구성 요소 또는 정적 UI 요소에서 선택적으로 사용하면 구조를 복잡하게하지 않고 React 앱을 최적화 할 수 있습니다. 다음 단계를 따르고, 예제를 시도하고, 실험을 계속하여 프로젝트에 가장 적합한 메모 화 전략을 찾으십시오!