Reflow(Layout)와 Repaint의 차이를 설명해주세요.

Reflow는 요소의 크기와 위치를 다시 계산하고, Repaint는 레이아웃 변경 없이 시각적 표현을 다시 그립니다. Reflow가 더 비싸므로 강제 동기 layout에 주의해야 합니다.

핵심 개념

핵심 기준은 위치/크기 변경과 시각 표현 변경입니다.

Reflow(Layout)는 width, height, font-size, DOM 삽입처럼 요소 배치를 바꾸는 작업에서 발생합니다. Repaint는 color, background처럼 위치와 크기는 그대로이고 픽셀 표현만 바뀔 때 발생합니다. Reflow는 주변 요소와 후속 paint까지 영향을 줄 수 있어 일반적으로 더 비쌉니다.

동작 흐름

1. 브라우저의 어느 단계나 API가 관여하는지 확인합니다.
2. 사용자 경험, 보안, 접근성에 미치는 영향을 함께 봅니다.
3. DevTools나 실제 지표로 추측을 검증합니다.
4. 적용 후 캐시, 호환성, 예외 상황을 점검합니다.

실제 예시

box.style.width = '300px';      // reflow 가능성 높음
box.style.background = 'red';   // 주로 repaint
box.style.transform = 'scale(1.1)'; // composite로 끝날 수 있음

예시는 핵심 흐름을 단순화한 것입니다. 실무에서는 팀의 배포 방식, 데이터 크기, 장애 영향도, 유지보수 비용까지 함께 고려해야 합니다.

실무에서 주의할 점

• 브라우저 구현 차이와 모바일 환경을 함께 확인해야 합니다.
• 성능 문제는 JavaScript만 보지 말고 네트워크와 렌더링 상태를 같이 봐야 합니다.
• 보안·접근성 기능은 편의성보다 안전한 기본값을 우선해야 합니다.

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

Reflow, Repaint, Layout, Performance

정리

한 줄로 정리하면, Reflow는 요소의 크기와 위치를 다시 계산하고, Repaint는 레이아웃 변경 없이 시각적 표현을 다시 그립니다. Reflow가 더 비싸므로 강제 동기 layout에 주의해야 합니다. 개념의 정의뿐 아니라 적용 조건과 실패했을 때의 증상까지 함께 이해하는 것이 중요합니다.