개요

React hooks의 문서를 바라보고 있으면, 조금 신경이 쓰이는 useRef의 사용법이 쓰여져 있었다.
언제 어떤 상황에서 사용할 수 있는지도 포함하여 써 간다.

무엇을하고 싶은 사람

참조를 보고 있는 한, ref로 지정하고 있는 컴퍼넌트가 마운트된 타이밍에서 실행할 수 있는 함수를 ref에 쓸 수 있는 것처럼 보였다.

export default function App() {
  const callbackref = useCallback(() => console.log("appのref"), []);
  return <div ref={callbackref} className="App" />;
}

// appのref 

다시 렌더링될 때

다시 렌더링되면 함수를 한 번 더 실행할지 시도합니다.
예상: 실행

export default function App() {
  // 再レンダリング用
  const [state, setState] = useState(false);
  const toggleState = useCallback(() => setState(!state), [state]);
  console.log({ state });

  const callbackref = useCallback(() => console.log("appのref"), []);
  return (
    <div ref={callbackref} className="App">
      <button onClick={toggleState}>toggle</button>
    </div>
  );
}

예상과 달리 첫 렌더링 때만 처리되는 것 같다.

자식 노드에도 가져 가자.

아이의 노드에도 callbackref를 건네줄 때는 어떤 순서로 처리되는지를 살펴본다
예상: 부모 → 아이의 순서

export default function App() {
  // 再レンダリング用
  const [state, setState] = useState(false);
  const toggleState = useCallback(() => setState(!state), [state]);
  console.log({ state });

  const callbackref = useCallback((node) => console.log(node), []);
  return (
    <div ref={callbackref} className="pearent">
      <div ref={callbackref} className="child" />
      <button onClick={toggleState}>toggle</button>
    </div>
  );
}

이것도 예상과는 달리 아이→부모의 차례로 처리되었다.
이것은 순서도있을 수 있지만 렌더링 처리가 끝난 순서부터 처리 될 수 있습니다.

useEffect에 비해

useEffect 처리와의 순서를 본다
예상: 아이 → 부모 → useEffect

export default function App() {
  // 再レンダリング用
  const [state, setState] = useState(false);
  const toggleState = useCallback(() => setState(!state), [state]);

  useEffect(() => {
    console.log('useEffect');
  }, []);

  const callbackref = useCallback((node) => console.log(node), []);
  return (
    <div ref={callbackref} className="pearent">
      <div ref={callbackref} className="child" />
      <button onClick={toggleState}>toggle</button>
    </div>
  );
}

이것은 예상대로, 마지막으로 useEffect의 처리가 왔다.

지금까지 알게 된 것

먼저 말했듯이, 쓰는 ref의 노드가 마운트된 후에만 처리되는 것 같다.

지금까지, 노드에 대해서 직접 처리를 하고 싶은 경우는 useEffect에 쓰고 있었지만, 이것을 사용하면, useEffect를 쓰지 않아도, 그 노드의 ref에 써 주면 잘 움직여 주는 것을 알 수 있었다.

사용미치

그리고 사용하기 쉽지만, 솔직히 생각하지 못합니다.
라이브러리 만들 때라든지, 조금 낡은 UI 만들거나 할 때는 사용할지도 모르지만, 조금 생각하지 않는다. . .

만약 이렇기 때문에 사용하고 있는 것 같은 것이 있으면 가르쳐 주었으면 합니다.