Repaint
· 연결된 개념 5개
리페인트는 가구 배치는 그대로 두고 벽지 색만 새로 칠하는 일이에요. 크기와 위치는 그대로이고 색이나 그림자 같은 겉모습만 바뀌면, 레이아웃 계산은 건너뛰고 픽셀만 다시 칠해요.
비유가 깨지는 곳 칠하기만 해도 합성만 하는 것보단 비싸요. 큰 영역의 그림자나 필터를 애니메이션하면 프레임마다 다시 칠해 느려져요. opacity·transform은 별도 레이어에 있으면 칠하지 않고 합성만 해요.
크기와 위치는 그대로이고 겉모습만 바뀌어 픽셀을 다시 칠하는 일. 리플로우는 건너뛰지만 합성만 하는 경우보다는 비싸다.
color, background, border-color, outline, box-shadow, visibilityvisibility: hidden은 자리를 그대로 차지하므로 리페인트만 일어난다. display: none은 렌더 트리에서 빠지므로 리플로우까지 일어난다opacity와 transform은 요소가 별도 합성 레이어에 있으면 페인트 없이 합성만 다시 한다DevTools의 Rendering 패널에서 "Paint flashing"을 켜면 다시 칠해지는 영역이 초록색으로 깜빡여서 확인할 수 있다 → 크롬 개발자 도구 팁
useLayoutEffect는 useEffect와 같은 일을 하지만, 브라우저가 화면을 그리기(Paint) 전에 동기적으로 실행된다. useEffect는 그린 뒤에 실행된다.
"다음 화면을 그리기 직전에 이 함수를 실행해 달라"고 브라우저에 예약하는 API. 콜백은 태스크 큐도 마이크로태스크 큐도 아닌 별도 목록에 들어가고, 이벤트 루프의 렌더링 단계에서 페인트 직전에 한꺼번에 실행된다.
화면 밖에 있는 요소의 렌더링을 건너뛰어도 된다고 브라우저에 알려 주는 CSS 속성. auto를 주면 뷰포트에서 멀리 있는 요소의 레이아웃·페인트를 생략하므로, 긴 페이지의 첫 렌더링과 스크롤이 빨라진다.
flex, px-4, text-sm처럼 속성 하나를 담은 유틸리티 클래스(Utility Class)를 마크업에 조합해 스타일을 입히는 CSS 프레임워크. 빌드할 때 소스를 훑어 실제로 쓰인 클래스의 CSS만 만들어 내는 빌드 도구이고, 런타임에 돌아가는 JS(JavaScript)는 없다.
Fiber는 React 16부터 쓰는 내부 자료구조이자 렌더링 엔진이다. 엘리먼트마다 Fiber 노드를 만들어 렌더 작업을 작은 단위로 쪼개고, 우선순위를 매기고, 중간에 멈췄다 다시 이어 갈 수 있게 한다.