221212 항해99 36일차 useLayoutEffect

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

• useEffect와 useLayoutEffect 훅의 형태는 완전히 동일하다.
• useEffect 훅을 사용할 경우 DOM의 레이아웃 배치와 페인트가 끝난 후 이펙트 함수를 호출한다. 따라서 상태값이 이펙트에 의존할 경우 약간 불편한 사용자 경험으로 이어질 수 있다.

import { useEffect, useState } from "react";

function App() {
  const [age, setAge] = useState(0);
  const [name, setName] = useState("");
  
  useEffect(() => {
    setAge(25);
    setName("찬민");
  }, []);
  
  return (
    <>
      <div className="App">{`그의 이름은 ${name} 이며, 나이는 ${age}살 입니다.`}</div>
    </>
  );
}

export default App;

• 위 코드는 다음 순서대로 작동한다.

  1) <div>그의 이름은 이며, 나이는 0살 입니다.</div>를 페인트
  2) 이펙트 내부의 setNumber, setName 호출
  3) 재렌더링 수행 -> <div>그의 이름은 찬민이며, 나이는 25살 입니다.</div>

• 간단한 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;

• useLayoutEffect는 브라우저가 화면에 DOM을 그리기 전에 이펙트를 수행한다. 따라서 위 코드의 실행 순서도 달라지게 된다.

  1) 레이아웃 이펙트 내부의 setNumber, setName 호출
  2) <div>그의 이름은 찬민이며, 나이는 25살 입니다.</div>를 페인트

참조:
useLayoutEffect 훅에 대하여