9. useEffect 의존성에 ref를 담을 때마다 찜찜하신 분들을 위해

https://velog.io/@shmoon2917/useEffect-의존성에-ref를-담을-때마다-찜찜하신-분들을-위해

ref 가 변경되어도 컴포넌트가 새로 렌더링 되지 않는다.
따라서 useEffect 는 ref 의 변경을 즉각 감지 할 수 없음
다음 조건에 따라 ref 를 관리하자

모든 렌더링시 마다 트리거되는 useEffect 가 아니라면, 사용할 ref 는 useCallback + callback ref 로 작성하기
모든 렌더링시마다 트리거 되는 useEffect 라면 useRef 의 값을 의존성으로 담아두 댐

callback ref 가 머야

const useGettingHeight = () => {
  const [height, setHeight] = useState(null);

  // ✅  useRef와 useEffect를 지우고 callback ref를 새로 작성
  const ref = useCallback((node: HTMLElement) => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return [height, ref];

callback ref 는 DOM 노드를 마운트 시키는 컴포넌트의 생명주기가 아니라, DOM 노드의 생명주기에 바인드 되어있기 때문에 모든 상황에서 작동한다!

https://velog.io/@cnsrn1874/번역-callback-refs-사용으로-useEffect-방지하기