React 메모화 치트 시트

React는 불필요한 재렌더링 및 재계산을 최소화하여 구성 요소 성능을 최적화하는 세 가지 주요 메모 도구를 제공합니다.

1. useMemo – 계산된 값을 메모합니다

• 목적: 계산 결과를 캐시하고 종속성이 변경되는 경우에만 다시 계산합니다.

• 사용법: 특정 종속성으로만 업데이트해야 하는 비용이 많이 드는 계산 또는 파생 데이터에 사용합니다.
  

  const memoizedValue = useMemo(() => complexCalculation(), [dependencies]);
  
  

  로그인 후 복사

• 모범 사례:

  • 종속성 배열의 함수 내에서 사용되는 모든 종속성을 포함합니다.
  • useMemo 내에서 새로운 참조(배열, 개체) 또는 인라인 함수를 생성하지 마세요.
  • 참고: 함수에 useMemo를 사용하지 마세요. 함수 참조가 아닌 값을 캐시합니다.

2. useCallback – 메모화 기능 참조

• 목적: 함수 참조를 캐시하여 렌더링할 때마다 다시 생성되는 것을 방지합니다.

• 사용법: 안정적인 함수 참조에 사용합니다. 특히 하위 구성 요소에 전달되는 콜백(예: 이벤트 핸들러)에 사용됩니다.
  

  const memoizedFunction = useCallback(() => { /* logic */ }, [dependencies]);
  
  

  로그인 후 복사

• 모범 사례:

  • 부실 값을 방지하려면 함수 내에서 사용되는 모든 종속성을 종속성 배열에 포함하세요.
  • useCallback 내에서 인라인 함수를 선언하지 마세요. 메모 기능이 손상될 수 있습니다.
  • 참고: useCallback은 함수에만 사용하세요. 값에 useCallback을 잘못 사용하면 불필요한 함수 호출로 인해 비효율적인 코드가 발생합니다.

3. React.memo – 전체 구성요소 메모하기

• 목적: props가 변경되지 않은 경우 기능 구성 요소가 다시 렌더링되는 것을 방지합니다.

• 사용: 상위가 변경될 때 다시 렌더링할 필요가 없는 하위 구성 요소를 최적화하는 데 사용합니다.
  

  const MemoizedComponent = React.memo(ChildComponent);
  
  

  로그인 후 복사

• 모범 사례:

  • 안정적인 소품을 받는 부품이나 거의 변하지 않는 소품과 함께 사용하세요.
  • React.memo의 효율성을 극대화하려면 소품(예: 새 개체/배열)을 자주 변경하지 마세요.
  • 참고: useCallbackmemoized 함수와 잘 작동하여 하위 구성 요소에 전달된 props를 안정적으로 유지합니다.

기억해야 할 핵심 사항

• 값에는 useMemo를 사용하고 함수에는 useCallback을 사용하세요.
  • 함수에 useMemo를 사용하면 안정적인 함수 참조가 아닌 즉시 실행됩니다.
  • 값에 useCallback을 사용하면 함수가 반환되므로 추가 함수 호출로 인해 코드가 비효율적입니다.
• 메모 요약:
  • useMemo: 계산된 값(함수의 반환 값)을 캐시합니다.
  • useCallback: 함수 참조(콜백)를 캐시합니다.
  • React.memo: 상위 업데이트에서 다시 렌더링되는 것을 방지하기 위해 소품을 기반으로 전체 구성 요소를 캐시합니다.
• 선택적으로 메모 사용: 메모를 올바르게 사용하면 성능이 향상되지만 과도하게 사용하거나 잘못 사용하면 복잡성이 가중될 수 있습니다.

위 내용은 React 메모화 치트 시트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!