때로는 너무 쉽게 성취할 수 있는 일들이 조용히 실패합니다. 최근에 나중에 사용하기 위해 React 구성 요소에 함수를 저장하려고 할 때 이러한 문제에 직면했습니다. 이 게시물에서 나는 내 상황에 대한 해결책을 설명하려고 노력했습니다.

나는 예전의 클래스 기반 React 컴포넌트를 기능적인 컴포넌트로 리팩토링하고 있었습니다. 나는 일반적으로 발생하는 useState 후크를 사용하려고했습니다. 하지만 이 경우에는 함수를 저장하려고 했습니다.

import React, { useState } from "react";

const MyComponent = (props) => {
  const [myFunc, setMyFunc] = useState();

  const handleClick = () => {
    const callback = props.someFunctionCall();
    setMyFunc(callback);
  };

  return (
    <button type="button" onClick={handleClick}>
      A button
    </button>
  );
};

언뜻보기에 상황이 괜찮아 보입니다. 그런데 실행해보니 바로 콜백 함수가 호출되는 것을 알 수 있었습니다.

왜요?

코드는 충분히 간단해 보입니다. 그러나 내 실수를 깨닫는 데 몇 분이 걸렸습니다. useState의 업데이트 함수는 값을 반환하거나 값을 반환하는 함수를 허용하기 때문입니다.

type SetStateAction<S> = S | ((prevState: S) => S);

그래서 setMyFunc 에 함수를 전달할 때 React는 callback 함수를 인수로 전달하여 prevState 함수의 반환 값을 얻으려고 했습니다.

해결책

문제를 인식하면 해결하기가 더 쉽습니다. 실제 callback 함수를 래핑하는 화살표 함수만 있으면 됩니다.

setMyFunc(() => callback);

그렇게 함으로써 React에 callback 함수를 가져오고 적절하게 설정하는 함수를 제공합니다.

자세한 내용은 React's Hooks API Reference을 참조하십시오.