메모 기능으로 React 앱 성능 향상: useMemo, useCallback 및 React.memo 살펴보기

웹사이트 성능을 개선하는 것은 사용자 경험을 향상하고 견고하고 반응성이 뛰어난 인터페이스를 보장하는 데 있어 중요한 단계입니다. 리소스 집약적인 일부 구성 요소가 포함된 React 또는 Next.js 프로젝트를 작업하는 경우 성능에 미치는 영향에 대해 걱정하는 것은 당연합니다. 이것이 바로 React의 메모 기능이 필요한 부분입니다. 메모 기능은 이러한 '비싼' 구성 요소의 속도를 높여 사용자에게 더 원활한 경험을 제공하는 데 도움이 됩니다.

이 글에서는 메모이제이션에 대해 다루고 useMemo(), useCallback(), React.memo HOC(Higher-Order Component)와 같이 앱 성능을 최적화할 수 있는 React 후크를 소개하겠습니다. 뛰어들어 보세요!

React에서 메모란 무엇인가요?

메모이제이션은 함수 호출과 같은 계산 작업의 결과를 캐시하여 동일한 입력이 다시 제공되면 다시 계산하는 대신 캐시된 결과를 반환함으로써 프로그램 속도를 높이는 데 사용되는 기술입니다.

useMemo Hook: React에서 결과 캐싱

useMemo는 컴포넌트를 다시 렌더링하거나 업데이트하는 사이의 기능 결과를 캐시하거나 메모하는 후크입니다.

이 후크를 사용하면 구성 요소에 있는 함수의 결과를 캐시할 수 있으며 다음에 다시 렌더링할 때 해당 함수의 입력이 변경되지 않으면 구성 요소가 캐시 결과를 사용하게 됩니다.

useMemo를 구현하는 방법:

useMemo는 최적화되지 않은 함수를 콜백 및 종속성 목록으로 사용하는 후크입니다. 그런 다음 React는 초기 렌더링 중 또는 후속 재렌더링 중 이 함수를 호출할 시점을 결정합니다.

• 초기 렌더링: 초기 렌더링 중에 React는 useMemo 함수를 호출하여 제공된 콜백 함수의 결과를 계산하고 저장합니다.

• 재렌더링: 재렌더링 시 React는 useMemo를 호출하여 종속성이 변경되었는지 확인합니다. 종속성이 변경되지 않은 경우 React는 마지막 렌더링 중에 저장된 캐시된 값을 재사용합니다. 그러나 종속성이 변경된 경우 useMemo는 콜백 함수를 다시 호출하여 업데이트된 값을 다시 계산하고 캐시에 저장합니다.

예:

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

squaredNumber는 숫자가 변경될 때만 계산됩니다. useMemo는 이 계산을 캐시하므로 렌더링할 때마다 불필요하게 다시 계산하지 않습니다.

useCallback 후크: 함수 정의 캐싱

useCallback은 구성 요소를 다시 렌더링하거나 업데이트하는 사이의 함수 정의를 캐시하거나 메모하는 후크입니다.

이 후크를 사용하면 다시 렌더링할 때 함수 정의를 저장할 수 있으므로 React는 함수의 종속성이 변경되지 않는 한 이 캐시된 버전을 재사용합니다.

useCallback을 구현하는 방법:

useCallback은 함수(콜백)와 종속성 목록을 취하는 후크입니다. 그런 다음 React는 초기 렌더링 중 또는 후속 재렌더링 중 이 함수를 반환(호출하지 않음)할 시기를 결정합니다.

• 초기 렌더링: 초기 렌더링 중에 React는 useCallback을 호출하여 콜백으로 전달한 함수를 저장합니다.

• 재렌더링: 재렌더링 시 React는 useCallback을 호출하여 종속성이 변경되었는지 확인합니다. 종속성이 변경되지 않은 경우 React는 마지막 렌더링 중에 저장된 캐시된 함수를 재사용합니다. 종속성이 변경된 경우 useCallback은 업데이트된 함수를 저장하고 반환합니다.

예:

import React, { useMemo } from 'react';

const MyComponent = ({ number }) => {
  const squaredNumber = useMemo(() => number * number, [number]);

  return <div>Squared Number: {squaredNumber}</div>;
};

React.memo 기능: 불필요한 재렌더링 방지

아시다시피 상위 구성 요소와 하위 구성 요소가 있는 경우 상위 구성 요소의 상태나 소품을 업데이트하면 모든 하위 구성 요소가 다시 렌더링됩니다. 소규모 프로젝트에서는 이것이 문제가 되지 않을 수 있지만 규모가 크고 복잡한 애플리케이션에서는 하위 구성 요소를 불필요하게 다시 렌더링하면 성능에 영향을 미칠 수 있습니다. 이를 해결하기 위해 React에서는 memo() 함수를 제공합니다.

메모(또는 React.memo) 기능을 사용하면 상위 항목이 업데이트될 때 구성 요소가 다시 렌더링되는 것을 방지하기 위해 구성 요소를 래핑할 수 있습니다. 래핑된 구성 요소는 자체 소품이나 상태가 변경되는 경우에만 다시 렌더링됩니다.

구성 요소에서 memo()를 처음 호출하면 React는 구성 요소를 렌더링하고 캐시합니다. 후속 렌더링에서 React는 구성 요소의 props와 상태가 변경되지 않는 한 이 캐시된 버전을 사용합니다. memo()는 변경되지 않은 props와 state에 대해서만 재렌더링을 방지한다는 점을 명심하세요. 일단 변경되면 memo()는 그에 따라 캐시된 구성 요소를 다시 렌더링하고 업데이트합니다.

React.memo를 구현하는 방법:

컴포넌트에 메모를 구현하려면 불필요한 재렌더링을 방지하려는 컴포넌트를 memo() 또는 React.memo()로 래핑하면 됩니다.

import React, { useState, useCallback } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(2);

  // Memoize the callback with `count` as a dependency
  const calculate = useCallback(() => {
    console.log("Calculating:", count * multiplier);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Multiplier: {multiplier}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setMultiplier(multiplier + 1)}>Increment Multiplier</button>
      <button onClick={calculate}>Calculate</button>
    </div>
  );
};

export default MyComponent;

참고:
memo()로 래핑된 구성 요소에 객체를 prop으로 전달하면 객체가 변경되지 않았더라도 구성 요소는 업데이트할 때마다 계속 다시 렌더링됩니다. 이는 React가 Object.is를 사용하여 이전 소품과 현재 소품을 비교하기 때문에 발생합니다. Object.is(3, 3)는 true를 반환하지만 Object.is({}, {})는 false를 반환합니다. 두 개의 서로 다른 객체 참조는 결코 동일한 것으로 간주되지 않기 때문입니다.

이를 방지하려면 useMemo를 사용하여 객체를 캐시하고 렌더링 전체에서 동일한 참조를 유지할 수 있습니다.

import React from 'react';

const MyComponent = ({ data }) => {
  return <div>{data.value}</div>;
};

export default React.memo(MyComponent);

이 예에서 useMemo는 데이터 객체가 동일한 참조를 갖도록 보장하여 MyComponent가 불필요하게 다시 렌더링되는 것을 방지합니다.

제 글을 읽어주셔서 감사합니다! Next.js, React, JavaScript 등에 대해 자세히 알아보려면 제 웹사이트 saeed-niyabati.ir을 팔로우하세요. 궁금한 점이 있으면 언제든지 문의해 주세요. 다음에 또 만나요!

위 내용은 메모 기능으로 React 앱 성능 향상: useMemo, useCallback 및 React.memo 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!