useMemo 및 useCallback을 사용하여 React 앱 최적화: 전체 가이드-JS 튜토리얼-php.cn

useMemo 및 useCallback을 사용하여 React 앱 최적화: 전체 가이드

Linda Hamilton

풀어 주다： 2025-01-04 07:25:34

원래의

220명이 탐색했습니다.

Optimizing React Apps with useMemo and useCallback: A Complete Guide

useMemo 및 useCallback을 사용하여 React 앱 최적화

React 애플리케이션에서는 특히 앱이 확장될 때 성능이 핵심입니다. 이 가이드에서는 useMemo 및 useCallback이 React 구성요소를 최적화하고 불필요한 재렌더링을 방지하는 데 어떻게 도움이 되는지 살펴보겠습니다.

React에서 최적화가 중요한 이유

React의 재렌더링 동작은 강력하지만 제대로 관리하지 않으면 성능 병목 현상이 발생할 수 있습니다. useMemo와 useCallback은 이러한 문제를 해결하기 위해 설계된 두 가지 후크입니다.

useMemo란 무엇인가요?

useMemo는 계산 결과를 기억하고 종속성이 변경될 때만 다시 계산합니다.

통사론:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

로그인 후 복사

예:

React 구성요소에서 비용이 많이 드는 계산을 상상해 보세요.

import React, { useMemo } from "react";

function ExpensiveComponent({ a, b }) {
  const expensiveValue = useMemo(() => {
    console.log("Calculating...");
    return a + b;
  }, [a, b]);

  return <div>Result: {expensiveValue}</div>;
}

로그인 후 복사

useMemo가 없으면 a 또는 b가 변경되지 않은 경우에도 이 계산이 모든 렌더링에서 실행됩니다.

useCallback이란 무엇입니까?

useCallback은 함수 인스턴스를 기억하고 종속성이 변경될 때만 다시 생성되도록 합니다. 하위 구성요소에 콜백을 전달할 때 특히 유용합니다.

통사론:

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

로그인 후 복사

예:

불필요한 하위 다시 렌더링 방지:

import React, { useCallback } from "react";

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log("Button clicked!");
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

function ChildComponent({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click Me</button>;
}

로그인 후 복사