useEffect 와 useLayoutEffect

useEffect

useEffect는 컴포넌트들이 render와 paint 된 후 실행되고. 비동기적(asynchronous) 으로 실행된다. paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게된다

1. 리액트 앱에서 렌더링이 트리거 됨 (dependency 수정됨)
2. 리액트가 컴포넌트를 렌더링함
3. 브라우저가 화면을 새로 그림
4. useEffect가 백그라운드에서 실행됨
5. useEffect 안에서 DOM 노드 ref를 조작함
6. 리렌더링, 이펙트가 DOM을 수정하는 동안 잠시 화면이 빔.
7. 브라우저가 화면을 새로 그림

import { useEffect, useState } from "react";

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

export default App;

이미지 출처:https://merrily-code.tistory.com/46

useLayoutEffect

useLayoutEffect는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 된다. 동기적(synchronous)으로 실행된다. paint 가 되기 전에 실행되기 때문에 dom을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않는다

 

1. 리액트 앱에서 렌더링이 트리거 됨 (dependency 수정됨)
2. 리액트가 컴포넌트를 렌더링함
3. useLayoutEffect가 실행됨
4. useLayoutEffect가 끝나기를 기다림
5. 브라우저가 화면을 새로 그림

import { useLayoutEffect, useState } from "react";

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

  useLayoutEffect(() => {
    setAge(30);
    setName("계란");
  }, []);

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

export default App;

이미지 출처:https://merrily-code.tistory.com/46

=>DOM을 변경해야 하는 경우나 계산된 state 값을 화면에 표출해야 하는 경우에는 useLayoutEffect를 사용하는 것이 좋다.

그 외 데이터 fetch 함수 실행 혹은 이벤트 핸들러, state를 다루는 작업 등 모든 경우에는 useEffect를 사용하면 된다.