react memo와 useCallback으로 React App 최적화 h.

React의 memo기능은 기능 구성 요소의 불필요한 재평가를 방지하는 강력한 도구입니다. 함수에서 구성 요소를 래핑하면 memo소품이 변경된 경우에만 구성 요소를 다시 렌더링하도록 React에 지시할 수 있습니다. 이렇게 하면 특히 자주 다시 렌더링되는 구성 요소가 많은 경우 애플리케이션의 성능이 크게 향상될 수 있습니다.

memo다음은 간단한 구성 요소의 불필요한 재평가를 방지하기 위해 사용하는 방법의 예입니다 .

import React, { memo } from 'react';

const TenchoComponent= (props) => {
  // component implementation
});

export default React.memo(TenchoComponent)

그렇다면 이를 모든 구성 요소에 적용하지 않는 이유는 무엇입니까? 메모를 사용하는 데 에도 비용이 듭니다. 메모를 사용할 때 렌더링하기 전에 React는 TenchoComponent로 이동하여 이전 값과 새 값을 비교합니다. 이 프로세스에서 react는 2가지 작업을 수행해야 합니다. 먼저 이전 값을 저장한 다음 이전 값을 자체 성능 비용이 있는 새 값과 비교합니다. 따라서 구성 요소, 구성 요소에 전달되는 소품 수 및 하위 구성 요소 수에 따라 크게 달라집니다. 자식 구성 요소가 많은 큰 구성 요소 트리가 있는 경우 React 메모는 훌륭한 도구가 될 수 있습니다.

이전 값과 새 값의 비교는 일반 비교 연산자 ' === '를 사용하여 수행됩니다. 이 비교는 부울, 문자열 등과 같은 기본 데이터 유형에서만 작동하지만 배열, 객체 등과 같은 기본이 아닌 값에는 작동하지 않습니다.

false===false
// will return true

'tencho' === 'tencho'
// will return true

[1,2,3]===[1,2,3]
//will return false

{} ==={}
// will return false

useCallback다음은 React 기능 구성 요소에서 후크를 사용하는 예입니다 .

import { useCallback } from 'react';

function MyComponent({ someProp }) {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <p>You have clicked the button {count} times</p>
    </div>
  );
}

export default MyComponent;

이는 자주 다시 렌더링되는 구성 요소가 있고 렌더링할 때마다 특정 기능이 다시 생성되는 것을 방지하려는 경우에 유용합니다. 를 사용하여 useCallback함수를 래핑하면 두 번째 인수에 지정된 종속성이 변경된 경우에만 함수가 다시 생성되도록 할 수 있습니다.

둘 다 useCallback유사 useMemo하고 불필요한 재 렌더링을 방지하는 데 유용하지만 useMemo함수 값을 메모하는 데 사용되며 useCallback함수 자체를 메모하는 데 사용됩니다.