[TIL] useEffect와 useLayoutEffect의 차이

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


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

useEffect와 useLayoutEffect는 위와 같이 형태상의 차이가 없다.
두 훅 모두 훅이 실행되었을 때 이펙트 함수가 실행되고, 리턴단계(unMount)에서 클린업 함수를 실행시키는 형태.

그렇다면 두 훅은 어떤 면에서 차이가 있을까?

* useEffect

먼저 useEffect로 전달된 함수는 기본적인 레이아웃이 모두 업데이트 완료된 뒤 실행된다.

 
  useEffect(() => {
    setName("유나");
  }, []);
  
  return (
    <>
      <div className="App">{`제 이름은 '${name}' 입니다.`}</div>
    </>
  );
}

예를 들어 위와 같이 코드를 작성하였을 경우, 다음과 같이 동작한다.

1. '제 이름은 '' 입니다.'
2. useEffect 실행
3. '제 이름은 '유나' 입니다.'

이 과정에서 사용자는 잠깐동안 깜빡거리는 화면을 볼 수 있고, 화면이 복잡해질 수록 렌더링 시간이 더욱 증가해 사용자의 불편을 야기할 수도 있다.

이 부분을 개선하기 위해 사용되는 것이 useLayoutEffect 훅.

* useLayoutEffect

  useLayoutEffect(() => {
    setName("유나");
  }, []);
  
  return (
    <>
      <div className="App">{`제 이름은 '${name}' 입니다.`}</div>
    </>
  );
}

useLayoutEffect의 경우 동일한 코드를 작성하였을 경우,

1. useLayoutEffect 실행
2. '제 이름은 '유나' 입니다.'

와 같이 화면 업데이트 이전에 이펙트를 실행한다.

이와 같이 두 훅은 실행 시점에서 차이를 보이며, 화면에 출력해주어야 하는 값들을 관리할 때엔 useLayoutEffect를, 그 외의 데이터 fetch 함수, 이벤트 핸들러, 출력과 관계 없는 state를 다루는 작업에는 useEffect를 사용하는 것이 좋다.