[React]Hook: useLayoutEffect

useLayoutEffect란?

useEffect와 비슷한 이름을 가진 useLayoutEffect는 사용방법은 같지만 실행원리는 다르다.

useEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependancy array]);
  
useLayoutEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependancy array]);

 

useEffect는 렌더링된 요소가 화면에 그려진 후 비동기적 으로 실행된다.

 

그러나 useLayoutEffect는 렌더링 후 요소가 화면에 그려지기 전에 동기적으로 실행된다. 그래서 데이터를 가져오는 시간이 오래걸린다면 그 시간만큼 사용자는 빈 화면을 보게 된다는 점을 유의해야 한다.

언제 useLayoutEffect를 사용해야 할까?

useEffect를 사용하다보면 경우에 따라 요소가 깜빡이는 경우를 볼 수 있다. 이때 useLayoutEffect를 사용한다면 문제를 해결할 수 있다.

하지만 useEffect를 기본적으로 사용하고 정말 필요한 경우에만 useLayoutEffect를 사용하는것이 좋다.(복잡한 로직이나 데이터 fetch / event handler / state reset 같은 경우엔 useEffect를 사용하자.)