Paint 이전 Macro Task가 실행될 가능성과 React의 useEffect

이전 아티클에서 useEffect는 macro Task를 통해 Paint 직후 실행됨을 시사하는 아티클을 작성하였습니다. [React] useLayoutEffect와 useEffectuseLayoutEffect와 useEffect를 사용하면서 느꼈던 의문을 해결하기 위해서 파보기로 했습니다.우선 브라우저의 렌더링 과정에 대해서 간략하게 알아보겠습니다. 크게 4가지로 나눌 수 있습니다.파싱lurgi.tistory.com 추가적으로 부족한 부분을 공부해보면서 Paint 이전 useEffect의 콜백이 실행될 가능성에 대해서 공부해보려 합니다!!! useEffect sometimes fires before paintuseEffect should run after paint to prevent blocking ..

• format_list_bulleted React
• · 2024. 11. 28.
• textsms

[React] useLayoutEffect와 useEffect

useLayoutEffect와 useEffect를 사용하면서 느꼈던 의문을 해결하기 위해서 파보기로 했습니다.우선 브라우저의 렌더링 과정에 대해서 간략하게 알아보겠습니다. 크게 4가지로 나눌 수 있습니다.파싱레이아웃페인트컴포지팅해당 과정에 대해서 자세히 알고 싶으시다면 제가 발표한 테코톡 참고해주세용~ 기본적으로 useLayoutEffect 와 useEffect 훅은 해당 렌더링 과정에 관여하는 훅입니다.useLayoutEffect는 Layout단계 직후 실행됩니다.useEffect는 Paint 단계 직후 실행됩니다.저는 여기서 해당 훅들이 어떻게 렌더링 타이밍을 정확하게 감지하는지에 대한 의문이 생겼습니다.1️⃣ useLayoutEffect가 Layout 직후 실행되는 방법React는 가상 DOM(Vi..

• format_list_bulleted React
• · 2024. 11. 22.
• textsms