리플로우(Reflow)와 리페인트(Repaint)는 무엇이 다른가요?

이렇게 답해 보세요 (핵심 답변)

리플로우(Layout)는 DOM 요소의 크기, 위치, 여백 등 기하학적 구조가 바뀔 때 브라우저가 요소들의 배치와 좌표를 다시 계산하는 과정이고, 리페인트(Paint)는 계산된 레이아웃 위에서 색상, 배경, 그림자 같은 시각적 픽셀 표현을 다시 그리는 과정입니다. 요소의 너비나 높이를 바꾸면 주변 요소 배치까지 다시 계산하는 리플로우와 그에 따른 리페인트가 연쇄적으로 일어나지만, 단순 배경색 변경은 레이아웃 단계를 건너뛰고 리페인트만 일어납니다. 특히 JavaScript에서 스타일을 수정한 직후 offsetHeight나 getBoundingClientRect() 같은 기하 속성을 반복해서 읽으면 브라우저가 큐에 모아 둔 변경을 즉시 계산하느라 강제 동기 레이아웃(Layout Thrashing)이 발생하므로 읽기 작업과 쓰기 작업을 분리해야 합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 변경하는 CSS 속성이 기하(Layout)를 건드리는지, 칠하기(Paint)만 건드리는지, 합성(Composite) 단계에서 처리 가능한지에 따라 렌더링 비용이 달라집니다.
2. 브라우저 DevTools의 Performance 트레이스를 확인하면 실제로 어느 구간에서 Layout과 Paint 비용이 크게 발생했는지 눈으로 검증할 수 있습니다.

면접에서 자주 하는 실수

transform이나 opacity 속성을 쓰면 레이어 메모리나 합성 비용도 전혀 들지 않고 언제나 무조건 공짜라고 단정해서는 안 됩니다.