[Deep Dive CS- Q10] React.useEffect vs React.useLayoutEffect (feat. EventLoop)

Q10. 이 원리를 바탕으로 리액트의 useEffect 실행 시점과 useLayoutEffect의 차이에 대해서도 설명해주세요.

 

1. 결론
- useLayoutEffect: 동기. 큐에 들어가지 않고 Call Stack에서 즉시 실행됩니다. 
- useEffect: 비동기. 브라우저가 화면을 그린 직후에 실행되도록 스케줄링 합니다. (엄밀히 말하면 Task Queue와 유사한 React 내부의 Scheduler를 탑니다)

 

2. 이벤트 루프 타임라인으로 비교

(브라우저가 화면을 그리는 시점을 기준으로 작성)

1. React 렌더링(Render Phase) : 컴포넌트 호출, Virtual DOM 비교.

2. DOM 업데이트(Commit Phase) : 실제 DOM에 변경사항 적용(innerHTML 변경 등).

3. 🛑 useLayoutEffect 실행 (동기) 
    - 콜스택이 비워지지 않습니다. 
    - DOM은 변했지만, 아직 브라우저에 그리지 못했습니다. 
    - 여기에서 DOM을 또 바꾸면, 사용자는 변경된 최종결과만 봅니다 (깜빡임 없음)
4. 🎨 브라우저 페인트(Paint / Screen Update)
    - 이벤트 루프가 '콜스택 비었네 렌더링 하자!' 하고 화면을 그립니다. 

5. ▶️ useEffect 실행 (비동기)
     - 화면이 다 그려진 후, React 스케줄러에 의해 실행됩니다.
     - 보통 requestIdleCallback이나 MessageChannel 등을 이용해 Task Queue처럼 동작하여, 렌더링을 방해하지 않고 실행됩니다.     

 

 

출처) 

https://f-lab.kr/insight/understanding-useeffect-and-uselayouteffect-in-react-20240618