깜빡이는 UI를 거부하세요. useLayoutEffect, 페인팅 그리고 브라우저 이야기
Korean FE Article Team 에서 번역해주는 FrontEnd 소식을 아카이브 하였습니다.
- 원문: https://www.developerway.com/posts/no-more-flickering-ui
- 번역글: https://velog.io/@tap_kim/no-more-flickering-ui?utm_source=substack&utm_medium=email
소개
이번 글은 평소 사용하는 리액트의 useEffect를 사용할 때 발생하는 깜빡인 현상을 주제로 평소 사용하는 브라우저의 주요 개념인 동기/비동기 개념을 중심으로 useEffect와 useLayoutEffect에 대해 깊이 있게 설명하는 글입니다.
자바스크립트의 관점으로 리액트에선 두 effect를 통해 어떤 방식으로 사용되는지, 쓰임새와 성능, 더불어 SSR까지 흐름으로 두 effect 훅에 대해 딥 다이브하기 좋은 글이 될 것 같습니다.
목차
- useEffect의 문제점이 뭘까요?
- useLayoutEffect로 수정하기
- 해결법이 효과적인 이유: 렌더링, 페인팅과 브라우저
- useEffect와 useLayoutEffect 비교로 돌아가기
- useEffect에 대해 좀 더 자세히 알아보기
- Next.js의 useLayoutEffect와 기타 SSR 프레임워크들