ReactJS Hook 패턴 ~Latest Ref 패턴~

Source: Dev.to

최신 Ref 패턴

• 최신 Ref 패턴은 useEffect 안에서 최신 값을 접근할 때, 의존성 배열에 추가하지 않아도 되는 문제를 해결합니다.
• 먼저 함수를 저장할 ref를 만들고, 그 다음 의존성이 없는 또 다른 useEffect를 사용해 매 렌더링마다 ref를 업데이트합니다.

import { useEffect, useRef } from "react";

function ClickHandler({ onClick }) {
  const onClickRef = useRef(onClick);

  // Keep the ref up‑to‑date on every render
  useEffect(() => {
    onClickRef.current = onClick;
  });

  // Use the ref inside an effect with an empty dependency array
  useEffect(() => {
    const handleClick = () => {
      onClickRef.current();
    };

    document.addEventListener("click", handleClick);

    return () => {
      document.removeEventListener("click", handleClick);
    };
  }, []);

  return (
    // JSX for the component can be placed here
  );
}

function App() {
  return <ClickHandler onClick={() => console.log("Clicked")} />;
}

export default App;