[React] useEffect VS useLayoutEffect 비교

💛  useEffect와 useLayoutEffect 비교

---

1. useEffect

useEffect는 비동기적이며 화면에 렌더링이 완료된 후에 수행이 됩니다.

🕐순서
- 렌더링을 한 후 React가 이를 DOM에 배치합니다.
- 브라우저에서는 이 컴포넌트를 화면에 보여줍니다.
- 그 후 useEffect 내의 코드를 실행합니다.
- 실행이 완료된 후 React는 DOM을 업데이트합니다.
- 업데이트 후 다시 렌더링을 하고 화면에 보여줍니다.

 

따라서 useLayoutEffect 내에 DOM에 영향을 주는 코드가 있으면

화면에 보여주는 작업을 한 후 DOM이 변경되기 때문에 레이아웃 깜빡임 효과가 나타납니다! 

2. useLayoutEffect

위에서 나온 useEffect와 같지만 모든 DOM 변경 후에 동기적으로 발생한다는 점에서 차이가 있습니다.

🕐순서
1. 렌더링을 한 후 React가 이를 DOM에 배치합니다.
2. useLayoutEffect 내의 코드를 실행합니다.
3. 실행이 완료된 후 React는 DOM을 다시 업데이트합니다.
4. 업데이트 후 브라우저에서는 이 컴포넌트를 화면에 보여줍니다.

 

따라서 useLayoutEffect 내에 DOM에 영향을 주는 코드가 있다하더라도

이 코드를 실행한 후 화면에 보여주는 작업을 하기 때문에 레이아웃 깜빡임 효과가 보이지 않습니다! 

 

 

결론!!
useEffect는 화면을 먼저 보여주고 DOM이 업데이트되고
useLayoutEffect는 DOM이 업데이트되고 화면을 보여준다는 점에서 차이가 있다.