브라우저에서 reflow와 repaint는 어떻게 다른가요?

reflow는 요소의 크기, 위치, 배치가 바뀌어 레이아웃을 다시 계산하는 작업이고, repaint는 레이아웃은 그대로지만 색상, 그림자 같은 시각적 표현을 다시 그리는 작업입니다. reflow는 하위·주변 요소에도 영향을 줄 수 있어 더 비싼 경우가 많습니다.

핵심 개념

핵심 기준은 레이아웃 재계산 여부입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

레이아웃 계산이 다시 필요한 변경과 픽셀만 다시 칠하면 되는 변경을 구분해보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

width나 font-size 변경은 reflow를 유발할 수 있고, color나 visibility 변경은 주로 repaint에 가깝습니다.

실무에서 적용하는 방법

반복 DOM 읽기와 쓰기를 섞지 말고 batch 처리하며, 애니메이션은 가능한 transform과 opacity 중심으로 구현합니다.

실무에서 주의할 점

• getBoundingClientRect 같은 레이아웃 읽기 직전에 스타일 쓰기가 있으면 강제 동기 레이아웃이 발생할 수 있습니다.
• will-change를 과도하게 쓰면 메모리 사용량이 늘어납니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

브라우저, 렌더링, reflow, 성능

면접에서 짚으면 좋은 포인트

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, reflow는 요소의 크기, 위치, 배치가 바뀌어 레이아웃을 다시 계산하는 작업이고, repaint는 레이아웃은 그대로지만 색상, 그림자 같은 시각적 표현을 다시 그리는 작업입니다. reflow는 하위·주변 요소에도 영향을 줄 수 있어 더 비싼 경우가 많습니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.