useRefEffect.md

useRefEffect

useRefEffect는 특정 DOM 요소에 참조를 설정하고 요소가 변경될 때마다 콜백을 실행하는 데 도움을 주는 커스텀 훅이에요. 이 훅은 메모리 누수를 방지하기 위해 요소가 변경될 때마다 정리 함수를 호출해요.

인터페이스

function useRefEffect<E extends HTMLElement>(
  callback: (element: E) => CleanupCallback | void,
  deps: DependencyList
): (element: E | null) => void;

파라미터

반환 값

예시

import { useRefEffect } from 'react-simplikit';

function Component() {
  const ref = useRefEffect<HTMLDivElement>(element => {
    console.log('Element mounted:', element);

    return () => {
      console.log('Element unmounted:', element);
    };
  }, []);

  return <div ref={ref}>기본 예시</div>;
}