✅

useCallback Ref에 대해 알아보쟈

날짜

Jul 5, 2022

callback ref의 동작 과정

💡

ref 콜백이 함수형 컴포넌트내에 선언되는 함수로 선언되있다면 ref 콜백은 업데이트 과정 중에 처음에는 null로, 그 다음에는 DOM 엘리먼트로, 총 두 번 호출됩니다. 이러한 현상은 매 렌더링마다 ref 콜백의 새 인스턴스가 생성되므로 React가 이전에 사용된 ref를 제거하고 새 ref를 설정해야 하기 때문에 일어납니다. 이러한 현상은 ref 콜백을 useCallback으로 메모이제이션되어 재선언되지 않는 함수로 선언함으로써 해결할 수 있습니다.

case1. 의존성 배열에 빈 배열이 없는 경우


const App = () => {
  const [visible, setVisible] = useState(false);
  const useCallbackRef = useCallback((node) => {
    console.log(node);
  });

  return (
    <div>
      {visible && <h1>test</h1>}
      <h2 ref={useCallbackRef}>Message List</h2>
      <button onClick={() => setVisible(!visible)}>toggle</button>
    </div>
  );
};

update됨에 따라, 재선언이 됨 ⇒ ref에 전달된 함수가 다름

visible state가 변경됨에 따라 같이 재실행

case2. 의존성 배열에 빈 배열이 있는 경우


const App = () => {
  const [visible, setVisible] = useState(false);
  const useCallbackRef = useCallback((node) => {
    console.log(node);
  }, []);

  return (
    <div>
      {visible && <h1>test</h1>}
      <h2 ref={useCallbackRef}>Message List</h2>
      <button onClick={() => setVisible(!visible)}>toggle</button>
    </div>
  );
};

메모이제이션을 함으로써 같은 함수를 전달

실제로 h2가 mount, unmount되는 시점에만 useCallbackRef가 실행이 됨

useRef callback이 애매한 경우

state나 prop에 의존을 가질경우는, componentWillUnmount나 componentDidMount를 대체할수는 없다!

변경된 값 추적이 불가능 하기 때문에 직접 접근할 수있게 useRef를 이용해야 한다.

useRefCallback은 언제 유용할까?

state나 prop에 의존성이 없는 경우

useRef(엘리먼트 참조용) + useEffect 를 useCallback 하나로 줄일수있다!