Reactjs의 useCallback 이해

useCallback 후크는 반환 값이 아닌 함수 자체를 메모합니다. useCallback은 함수 참조를 캐시합니다

구성 요소 내부에 선언된 함수는 변수와 유사하게 렌더링할 때마다 다시 생성됩니다. 차이점은 매번 다른 참조로 렌더링된다는 것입니다. 그래서

• 이 함수에 종속된 useEffect는 렌더링할 때마다 다시 실행됩니다.
• 하위 구성요소에서도 비슷한 일이 발생합니다.

이 함수에 종속된 useEffect는 렌더링할 때마다 다시 실행됩니다.

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

// Parent Component
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  // Function declared inside the component
  const handleClick = () => {
    setCount(count + 1);
  };

  // useEffect depending on handleClick
  useEffect(() => {
    console.log("handleClick changed, running useEffect");
  }, [handleClick]);

  return (
    <div>
      <button onClick={handleClick}>Increment Count</button>
      <p>Count: {count}</p>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
};

// Child Component
const ChildComponent = React.memo(({ handleClick }) => {
  console.log("ChildComponent re-rendered");
  return <button onClick={handleClick}>Child Increment</button>;
});

export default ParentComponent;

하위 구성 요소에서도 비슷한 일이 발생합니다.

다른 구성 요소의 하위 요소로 비용이 많이 들거나 "느린" 렌더링 로직을 사용하는 구성 요소가 있는 경우 상위 구성 요소가 렌더링될 때마다 해당 하위 요소도 모두 다시 렌더링됩니다.

이러한 불필요한 재렌더링을 방지하기 위해 React.memo를 사용할 수 있습니다. 이 고차 구성 요소는 하위 구성 요소를 캐시하여 props가 실제로 변경되는 경우에만 다시 렌더링되도록 합니다. 그러나 함수를 props로 전달할 때 미묘한 문제가 있는데, 이로 인해 렌더링해서는 안 되는 경우에도 하위 항목이 다시 렌더링됩니다.

함수 참조 문제

App의 자식으로 SlowComponent가 있다고 상상해 보세요. 앱에는 버튼 클릭 시 변경되는 상태가 있어 앱이 다시 렌더링됩니다. SlowComponent의 소품을 변경하지는 않지만 클릭할 때마다 여전히 다시 렌더링됩니다.

왜요? 각 렌더링에서 핸들클릭 함수는 새로운 참조로 다시 생성되며, React는 이를 변경된 소품으로 해석하여 SlowComponent가 다시 렌더링되도록 합니다. 이 문제를 해결하기 위해 useCallback 후크를 사용하여 렌더 전반에 걸쳐 함수 참조를 캐시합니다.

useCallback을 사용한 솔루션

useCallback 내부에 handlerClick을 래핑하여 특정 종속성이 변경될 때만 React에 이를 다시 생성하도록 지시합니다. 구문은 다음과 같습니다.

const cachedFn = useCallback(fn, [dependencies]);

• fn: 캐시하려는 함수 정의입니다. 인수를 허용하고 모든 값을 반환할 수 있습니다.
• 종속성: 종속성 배열입니다. React는 종속성이 변경되면 fn을 다시 생성합니다. 첫 번째 렌더링에서 React는 함수를 생성하고 캐시합니다. 후속 렌더링에서는 종속성이 변경되지 않는 한 캐시된 함수가 반환되어 안정적인 참조를 보장합니다.

예제에 useCallback 적용
useCallback을 사용하여 앱 구성요소를 최적화하는 방법을 살펴보겠습니다.

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

const App = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState("");

  // Wrapping handleClick with useCallback to cache its reference
  const handleClick = useCallback(() => {
    setValue("Kunal");
  }, [setValue]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
      <SlowComponent handleClick={handleClick} />
    </div>
  );
};

const SlowComponent = React.memo(({ handleClick }) => {

// Intentially making the component slow
  for (let i = 0; i < 1000000000; i++) {}
  console.log("SlowComponent re-rendered");
  return <button onClick={handleClick}>Click me in SlowComponent</button>;
});

export default App;

useCallback을 사용하는 경우

• 구성 요소 내부 요소에 대해 정의된 이벤트 핸들러가 있는 경우 이벤트 핸들러가 불필요하게 다시 생성되는 것을 방지하기 위해 이를 useCallback 내에 래핑하세요.
• useEffect 내에서 함수를 호출할 때 일반적으로 해당 함수를 종속성으로 전달합니다. 모든 렌더링에서 불필요하게 useEffect를 사용하지 않으려면 useCallback 내부에 함수 정의를 래핑하세요.
• 사용자 정의 후크를 작성하고 함수를 반환하는 경우 useCallback 내에 래핑하는 것이 좋습니다. 따라서 사용자는 후크 최적화에 대해 걱정할 필요가 없으며 오히려 자신의 코드에 집중할 수 있습니다.

위 내용은 Reactjs의 useCallback 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!