React에서 &#useCallback&#이란 무엇인가요?

useCallback은 콜백 함수를 메모하여 컴포넌트를 최적화하는 데 도움을 주는 React Hook입니다. 종속성이 변경되지 않는 한 함수 참조가 렌더링 전반에 걸쳐 동일하게 유지되도록 보장합니다. 이는 하위 구성 요소의 useEffect 후크를 불필요하게 다시 렌더링하거나 재실행하는 것을 방지하므로 하위 구성 요소에 함수를 prop으로 전달할 때 특히 유용합니다.

---

useCallback을 사용하는 이유는 무엇인가요?

1. 불필요한 재렌더링 방지:
   콜백 함수를 하위 구성 요소에 소품으로 전달하면 해당 함수는 렌더링할 때마다 다시 생성됩니다. 이로 인해 하위 구성요소가 불필요하게 다시 렌더링될 수 있습니다.

2. 안정적인 함수 참조:
   하위 구성 요소가 useEffect를 사용하고 콜백 prop에 의존하는 경우 불안정한 함수 참조로 인해 useEffect가 불필요하게 다시 실행됩니다.

3. 성능 최적화:
   동일한 함수를 자주 다시 생성하여 비용이 많이 드는 계산이나 작업을 방지하는 데 도움이 됩니다.

---

구문

const memoizedCallback = useCallback(
  () => {
    // Your logic here
  },
  [dependencies] // Array of dependencies
);

• 콜백 기능: 메모하고 싶은 기능
• 종속성: 함수가 의존하는 값입니다. 변경되면 기능이 다시 생성됩니다.

---

Callback을 사용하지 않은 예

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

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs whenever the `callback` reference changes
  }, [callback]);

  return <div>Child Component</div>;
};

const Parent = () => {
  const [count, setCount] = useState(0);

  const callback = () => {
    console.log("Callback called");
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• 문제: 개수가 변경되더라도 Parent가 렌더링될 때마다 콜백 함수가 다시 생성되기 때문에 Child 구성 요소의 useEffect가 다시 실행됩니다.

---

useCallback으로 수정

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

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs only when `callback` changes
  }, [callback]);

  return <div>Child Component</div>;
};

const Parent = () => {
  const [count, setCount] = useState(0);

  const callback = useCallback(() => {
    console.log("Callback called");
  }, []); // Dependencies are empty, so the callback is memoized

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• 해결책: 이제 콜백 참조가 안정적으로 유지되므로 Child 구성 요소의 useEffect가 불필요하게 다시 실행되지 않습니다.

---

useCallback은 언제 사용하나요?

• 하위 컴포넌트에 props로 함수를 전달하는 경우
• 하위 컴포넌트가 최적화를 위해 React.memo()를 사용하는 경우
• 하위 컴포넌트가 해당 함수를 사용하는 useEffect에 의존하는 경우

---

일반적인 오용

모든 기능에 useCallback을 사용하지 마십시오. 다음과 같은 경우에만 유익합니다.

1. 함수는 자식에게 prop으로 전달됩니다.
2. 이 함수를 다시 생성하려면 계산 비용이 많이 듭니다.

위 내용은 React에서 &#useCallback&#이란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!