안녕하세요, Reactjs에서 가장 많이 사용되는 후크를 거의 다뤘습니다. 지난 포스트에서 우리는 useRef 훅에 대해 이야기했습니다. 이 게시물에서는 useCallback 후크를 다룰 것입니다. 그럼 바로 시작하겠습니다.

useCallback 후크는 무엇입니까

콜백 사용은 전달된 종속성 중 하나가 변경될 때 메모된 콜백 함수를 반환하는 후크입니다.

기다리다! useMemo가 하는 일이 아닌가요?

짧은 대답은 NO입니다! 두 후크 모두 무언가를 메모하고 있지만 완전히 다른 것을 반환합니다. useMemo 후크는 메모된 값을 반환하고 useCallback은 메모된 함수를 반환합니다.

콜백을 사용하는 이유는 무엇입니까?

useCallback 후크는 생성된 함수 중 일부가 복잡하고 구성 요소를 다시 렌더링하면 실행 시간이 느려질 수 있기 때문에 원하지 않는 함수가 실행될 수 있는 응용 프로그램을 생성할 때 매우 유용합니다.

몇 가지 동작을 살펴보겠습니다.

이 후크는 콜백 함수(useCallback)와 값이 변경될 때 후크가 실행되도록 하는 종속성 목록을 허용합니다.


기본 사용법

import { useCallback } from 'react';

const callbackVariable = useCallback(() => {
     functionCall(a, b)
 },[a, b]);

예시
후크 옆에 useCallback 후크를 사용할 가능성이 높습니다. 때때로 연속적인 재 렌더링 또는 무한 루프를 방지하기 위해. 아래 샌드박스의 예를 고려하십시오.



위의 예에서 작업 중인 구성 요소는 App.js 파일과 Score.js 파일입니다. 점수 구성 요소에는 props 변경 시 상태를 업데이트하고 콘솔에 메시지를 기록하는 useEffect가 있습니다.

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

const Score = ({ score }) => {
  const [showScore, setShowScore] = useState();

  useEffect(() => {
    setShowScore(score());
    console.log("Component updating");
  }, [score]);

  return (
   <div>
      <div>Score here: {showScore}</div>
   </div>
  );
}

export default Score;

App.js 파일에는 사용자가 입력하는 모든 점수에 5를 추가하는 clacScore 함수, 사용자가 플레이어 이름을 입력할 수 있는 입력 필드 및 플레이어 이름을 전환하는 버튼이 있습니다. 모든 것이 잘 작동하는 것 같죠?

코드에 문제가 있습니다. 입력 필드에 플레이어의 이름을 입력하면 메시지가 콘솔에 기록되며 이는 페이지에서 어떤 작업을 수행할 때도 발생합니다. 점수를 업데이트할 때만 해당 메시지가 표시되기를 원하기 때문에 이것은 문제입니다.

구조에 대한 useCallbackclacScore 함수를 아래 코드로 바꿔보세요.

  const clacScore = useCallback(() => {
    return(scoreEntered * 5);
  }, [scoreEntered]);

이제 입력 상자에 플레이어 이름을 입력하거나 플레이어 이름을 표시해 보십시오. 콘솔의 메시지는 점수를 변경할 때만 표시됩니다. 이는 useCallback 상태가 업데이트될 때 Score 구성 요소만 렌더링하도록 React에 지시하기 위해 scoreEntered 후크를 사용하고 있기 때문입니다. 따라서 후크는 실제로 작은 응용 프로그램의 성능을 높이는 데 도움이 되었습니다.

콜백은 언제 사용해야 하나요?

그래서 나는 우리가 useCallback이 굉장하다는 데 동의할 수 있다고 확신합니다. 하지만 그렇다고 해서 모든 함수를 useCallback으로 래핑해야 한다는 의미는 아닙니다. 다음과 같이 말하는 것을 기억하세요.

Too much of everything isn't cool.

예, 그것은 useCallback 및 useMemo 및 useAnything에 적용됩니다 (잠깐! 뭐?😅).

따라서 useCallback 후크는 다음과 같은 경우에만 사용해야 합니다.

우리는 하고 싶습니다referential equality(JavaScript는 함수를 객체로 보고 객체 간의 동등성을 테스트하는 것은 JavaScript에서 상당히 번거롭기 때문입니다)

복잡한 함수가 있는 경우(즉, 해당 함수를 계산하는 데 비용이 많이 듭니다).

결론

관련은 없지만 슈퍼맨을 되살려야 했던 법무부 리그의 한 장면을 기억하십니까? 그들은 그를 다시 데려올 완벽한 이유가 있었습니다. 동일한 논리가 여기에 적용됩니다. useCallback을 도입한다는 것은 우리가 코드에 이미 몇 가지 복잡성을 도입하고 있음을 의미하므로 코드에서 useCallback을 사용해야 할 완벽한 이유가 있어야 합니다.

읽어주셔서 정말 감사합니다. 다음 섹션에서는 useReducer 후크를 다룰 것입니다. 기고문이나 의견이 있으시면 아래 댓글에 남겨주세요. 또한 이와 같은 더 많은 콘텐츠를 보려면 나를 팔로우하고 안전하게 지내십시오.