[React] useEffect vs useLayoutEffect

useEffect hook만 사용하다 useLayoutEffect hook을 알게되어 차이점을 기록하려한다.
두 hook은 화면이 렌더링될 때 실행된다는 점에서는 동일하다. 그러나 약간의 차이점이 존재한다.
1) useEffect
화면이 레이아웃과 배치가 끝난 이후 실행된다.
아래의 코드를 살펴보자

function app() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(25);
  },[]);
  return(
  	<div>{count}</div>
  )
}

위의 코드는 화면이 렌더링 될때 count state를 25로 변경해준 후 렌더링 할 것이다. 그러나 화면을 새로고침을 해보면 표시되는 count가 initialState값인 0이었다가 아주 빠르게 25로 변경되는 것을 알 수 있다.
-> 화면이 렌더링 될 때 먼저 count state를 initialState로 레이아웃배치와 그리기를 완료한 후 그제서야 state를 우리가 설정한 25로 변경해줌을 알 수 있다.

그렇다면 useLayoutEffect는 어떻게 동작할까?
2)useLayoutEffect
화면이 레이아웃배치와 그리기전에 먼저 실행된다.
다음 코드를 살펴보자

function app() {
  const [count, setCount] = useState(0);
  useLayoutEffect(() => {
    setCount(25);
  },[]);
  return(
  	<div>{count}</div>
  )
}

보면 useEffect를 사용했을 때와 별반 차이가 없어 보인다. 그러나 useLayoutEffect를 사용하면 useEffect를 사용했을 때와 달리 count state가 initialState가 아닌 setCount로 설정한 값으로 처음부터 렌더링 되는 점을 알 수 있다.

따라서, 화면이 렌더링될때 상태값에 의존을 많이 하고 있다면 useEffect를 사용하는 것보다 useLayoutEffect를 사용하는 것이 원하는 결과를 얻을 수 있을 것이다.