React useEffect와 useLayoutEffect 차이점

react에서 많이 사용되는 기본 훅인 useEffect와 useLayoutEffect의 차이점에 대해서 알아보려고 한다.

 

기본적으로 useEffect의 기능은 

화면이 렌더될 때 디펜던시 항목의 내용이 변경되었으면 useEffect의 내부의 내용을 실행시키는 기능을 한다.

아무것도 없는 공란일 경우는 처음 렌더될 때 한번 만 수행하게된다.

 

위의 기능은 useLayoutEffect도 동일하다고 봐도 무방하다.

 

그렇다면 무슨 차이가 있는걸까?

코딩되는 내용도 이름만 다르고 사용되는 방식은 아래와 같이 동일하다.

 

코드작성

import { useEffect, useLayoutEffect } from 'react';

useEffect(()=>{
  doFunc();
}, [dependecy]);

useLayoutEffect(()=>{
  doFunc();
}, [dependecy]);

 

차이점

- useEffect는 state의 변경으로 DOM 변경 작업에 작동되고  'useEffect'의 주요 특징은 렌더링 주기 후에 비동기적으로 실행되는데 이는 페인팅, 레이아웃 및 기타 브라우저 작업을 차단하지 않고 수행된다.

 

- 반면 useLayoutEffect는 useEffect와 다르게 모든 DOM 변형 후에 동기적으로 실행된다는 것입니다. 즉, 브라우저가 화면을 렌더하기 전에 실행됩니다.

useEffect useLayout 실행 순서(출처: @_georgemoller)

 

언제 사용해야 할까?

그렇다면 useLayoutEffect는 언제 사용되어야할까?

useLayoutEffect는 화면이 렌더되기전에 미리 작업되서 세팅되어야할 내용이 있을 경우에 사용하면된다.

혹자같은 경우는 위의 경우 말고도 특정 화면 이벤트 처리중에 화면이 깜빡거리는 현상을 만났을 때 

useEffect에서 useLayoutEffect를 사용하여 해당 경우를 해결한 경우도 있다.

 

개발하는 상황에 따라 적절히 비교해보며 더 유용하고 알맞은 훅을 사용하는게 좋을 것이라 생각한다.

 

useLayoutEffect React 공식 문서

https://react.dev/reference/react/useLayoutEffect

useLayoutEffect – React

 

결론

useEffect에서 작업을 수행시켰는데 원하는 결과물이 화면이 그려지지 않는경우 useLayoutEffect를 사용하여 렌더전에 미리 작업을 해두면 가능할지 생각해보고 적용해보자.

 

추천글

Recoil 새로고침 데이터 유지하기(feat. recoil-persist)