[React] useEffect와 useLayoutEffect의 차이

 

useEffect와 useLayoutEffect의 차이에 대해 알아보겠습니다.

 

 

🧑🏻‍💻 useLayoutEffect

 

📌 useLayoutEffect

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

 

📌 useEffect

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

 

useLayoutEffect와 useEffect 훅의 형태는 동일합니다. 

 

그렇다면 어떤 부분에서 차이점이 있을까요?

 

⭐️ useEffect

useEffect는 컴포넌트가 render와 paint 된 후 비동기적으로 실행됩니다.

 

paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면이 깜빡거리는 현상을 볼 수 있습니다. 

 

📌 render : DOM Tree를 구성하기 위해 각 element의 스타일 속성을 계산하는 과정 

 

📌 paint : 실제 스크린에 Layout을 표시하고 업데이트하는 과정

 

 

https://pubudu2013101.medium.com/what-is-the-real-difference-between-react-useeffect-and-uselayouteffect-51723096dc19

 

import { useEffect, useState } from "react";
 
function App() {
  const [age, setAge] = useState(0);
  const [name, setName] = useState("");
  
  useEffect(() => {
    setAge(26);
    setName("정현");
  }, []);
  
  return (
    <>
      <div className="App">{`그의 이름은 ${name} 이며, 나이는 ${age}살 입니다.`}</div>
    </>
  );
}
 
export default App;

 

위의 코드의 경우 useEffect 되는 순간 이름과 나이가 재설정되기 때문에 DOM에 영향을 끼칩니다.

 

즉, useEffect의 이펙트는 DOM이 화면에 그려진 이후에 호출됩니다.

 

⭐️ useLayoutEffect 

useLayoutEffect는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 됩니다. 이 작업은 동기적으로 실행됩니다. 

 

즉, paint가 되기전에 실행되기 대문에 dom을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다.

 

하지만, useLayoutEffect는 내부 코드가 모두 실행된 후 painting을 거치기 때문에 로직이 복잡할 경우 사용자가 레이아웃을 보는 데까지 시간이 오래 걸린다는 단점이 있습니다.

 

https://pubudu2013101.medium.com/what-is-the-real-difference-between-react-useeffect-and-uselayouteffect-51723096dc19

 

 

⭐️ 결론

상황에 맞게 사용하는 것이 중요합니다.

 

useEffect의 경우 대표적으로

 

• 데이터를 fetch하는 경우
• event handler를 사용하는 경우
• state를 reset하는 경우

에 사용하는 것이 권장됩니다. 

 

useLayoutEffect의 경우 

 

import { useEffect, useState } from "react";
 
function App() {
  const [age, setAge] = useState(0);
  const [name, setName] = useState("");
  
  useEffect(() => {
    setAge(26);
    setName("정현");
  }, []);
  
  return (
    <>
      <div className="App">{`그의 이름은 ${name} 이며, 나이는 ${age}살 입니다.`}</div>
    </>
  );
}
 
export default App;

위와 같이 state가 존재할 때, 해당 state가 첫  painting시와 다르게 렌더링 되어야 할 경우 useEffect 사용 시 처음에는 

 

"그의 이름은 이며, 나이는 살 입니다."이지만  이후에는 "그의 이름은 정현이며, 나이는 26살 입니다"로 re-rendering이 되며 화면이 깜빡거리기 때문에 useLayoutEffect를 사용하는 것이 바람직합니다.

 

🏷️ Ref 

https://pubudu2013101.medium.com/what-is-the-real-difference-between-react-useeffect-and-uselayouteffect-51723096dc19

https://merrily-code.tistory.com/46