필수 개념 Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정 즉 시각적 변경 사항이 사용자에게 표시되는 것을 말함. 개념 1) useEffect useEffect는 컴포넌트들이 render와 paint된 후 실행된다.
이는 비동기적(asynchronous)으로 실행된다. paint된 후 실행되기 때문에, useEffect내부에 DOM에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게된다. useEffect 흐름 2) useLayoutEffect useLayoutEffect는 컴포넌트들이 render된 후 실행되며, 그 이후에 paint가 되게 된다. 이 작업은 동기적(synchronous) 으로 실행되며, paint가 되기전에 실행되기 때문에 DOM을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않게 된다. useLayoutEffect 흐름 u...
![[React] useEffect와 useLayoutEffect 비교하여 알아보기](https://blogimgs.pstatic.net/nblog/mylog/post/og_default_image_160610.png)
#
eventhandler
#
react18
#
render
#
useLayoutEffect
#
userEffect
#
깜박임
#
동기적
#
로직