leegwae/study-react

내가 공부한 React

study-react's Issues

깜빡이는 문제 ref callback으로도 해결 가능한가

콘솔 출력 기준
rendering -> ref callback -> useLayoutEffect -> useEffect

근데 useLayoutEffect가 내부적으로 set 함수 다른 큐에 넣든지 처리해줄 거 같아서 아마 안 될 듯?

import { useEffect, useLayoutEffect } from "react";

function App() {
  console.log("render");

  useLayoutEffect(() => {
    console.log("useLayoutEffect");
  }, []);

  useEffect(() => {
    console.log("useEffect");
  }, []);
  return (
    <>
      <div
        ref={() => {
          console.log("ref callback");
        }}
      />
    </>
  );
}

export default App;