[React] useEffect와 useLayoutEffect

 

 

 

 

1. useEffect와 useLayoutEffect는 각각 무엇일까?

useEffect와 useLayoutEffect 모두 React의 hook인데, 이 둘 모두 비동기 작업 또는 side effect를 처리하기 위해 사용되는 hook이다. 그렇기 때문에 비슷해보이지만 각각의 특징과 차이점이 있다.

 

2. useEffect와 useLayoutEffect의 차이점

useEffect의 경우

useEffect는 렌더링 후에 실행되는 함수이다. DOM의 Layout 렌더와 Paint가 종료된 후 호출되는 이펙트 함수이다.
렌더 -> 페인트 -> useEffect 순으로 실행되며, DOM이 그려진 후 useEffect의 callback 함수들이 실행되며 리렌더링이 실행된다. 
이

1) 비동기 처리에 적절

• useEffect는 비동기 작업이 완료된 후에 실행된다.
• 화면 갱신이 끝난 후 실행되기 때문에 UX에 지장을 주지 않는다. 

2) Rendering이 완료된 후에 실행

• useEffect의 callback 함수는 컴포넌트가 렌더링을 완료한 후에 실행된다. 

3) 클라이언트 측 렌더링을 기다리지 않음

• 브라우저에서 화면을 그리는 과정을 기다리지 않고 비동기적으로 실행된다.

 

useLayoutEffect의 경우

브라우저가 DOM에 paint 하기 전에 실행되므로 렌더 -> useLayoutEffect -> 페인트 순으로 실행된다. 

1) 동기적인 실행

• 렌더링 이후, 화면이 갱신되기 전에 실행된다.

2) 렌더링 후 화면 갱신 전 실행

• useLayoutEffect의 callback 함수는 렌더링 후 DOM이 업데이트 되기 전에 실행된다.

3) SSR에서 동기적인 작업 처리

• SSR에서 동기적으로 작업을 처리할 수 있다. 

 

3. useEffect와 useLayoutEffect을 언제 사용해야하는가?

웬만하면 useEffect를 사용하고, UX적으로 신경써야하는 몇몇 경우에만 useLayoutEffect를 사용한다.