useLayoutEffect_React

useLayoutEffect(() => {
  effect
  return () => {
    cleanup
  };
}, [input])

• useEffect와 useLayoutEffect훅의 형태는 완전히 동일하다
• useEffect는 지연 이벤트 동안에 레이아웃 배치와 그리기를 완료한 후 발생하기 때문에 useEffect의 내용이 늦게 들어올 수 있다 이를 해결하기 위해 등장한 훅이다(렌더링->이펙트호출)
• 레이아웃 이펙트는 브라우저가 화면에 DOM을 그리기전에 이펙트를 수행한다(레이아웃이펙트 호출 -> 렌더링)

import { useLayoutEffect, useState } from "react";

function App() {
  const [age, setAge] = useState(0);
  const [name, setName] = useState("");

  useLayoutEffect(() => {
    setAge(25);
    setName("찬민");
  }, []);

  return (
    <>
      <div className="App">{`그의 이름은 ${name} 이며, 나이는 ${age}살 입니다.`}</div>
    </>
  );
}

export default App;

참고블로그