실제 DOM 조작 시 변경 사항이 어떻게 처리되는지, 그리고 리플로우(Reflow)와 리페인트(Repaint)가 언제 발생하는지에 대해 좀 더 구체적으로 설명드리겠습니다.
리플로우(Reflow)와 리페인트(Repaint)
- 리플로우(Reflow):
- 리플로우는 DOM 요소의 레이아웃이 변경되어 브라우저가 새로운 레이아웃을 계산해야 할 때 발생합니다.
- 예를 들어, 요소의 크기, 위치, 폰트 크기 등이 변경되면 리플로우가 일어납니다.
- 리플로우는 영향이 매우 큰 작업으로, DOM 트리의 일부 또는 전체를 다시 계산해야 할 수 있습니다.
- 리페인트(Repaint):
- 리페인트는 요소의 스타일이 변경되어 다시 그려야 할 때 발생합니다. 예를 들어, 색상, 배경 이미지, 테두리 등이 변경되는 경우입니다.
- 리페인트는 리플로우보다 상대적으로 덜 부담되는 작업이지만, 여전히 성능에 영향을 줄 수 있습니다.
최소한의 DOM 조작 시
작은 변경이라도 리플로우와 리페인트는 발생할 수 있지만, 항상 그런 것은 아닙니다. DOM 조작이 리플로우 및 리페인트를 일으키는지 여부는 다음과 같은 요소에 따라 다릅니다:
- 텍스트 변경:
- 텍스트 내용을 변경하면 브라우저가 변경된 영역의 크기를 다시 계산해야 할 수 있습니다. 이로 인해 리플로우가 발생할 수 있습니다.
- 자간이 변하거나 줄바꿈이 발생하면 특히 그렇습니다.
- 크기와 위치 변경:
- 요소의 크기와 위치가 변경되면 리플로우가 발생하며, 이후에 리페인트도 필요할 수 있습니다.
- 스타일 변경:
- 색상, 배경 등 단순한 스타일 변경은 리페인트만 발생할 수 있지만, 레이아웃에 영향을 미치는 스타일(예:
display,width,height)이 변경되면 리플로우가 발생할 수 있습니다.
- 색상, 배경 등 단순한 스타일 변경은 리페인트만 발생할 수 있지만, 레이아웃에 영향을 미치는 스타일(예:
예제: 리플로우와 리페인트의 차이
다음 예제는 리플로우와 리페인트가 언제 발생하는지 보여줍니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reflow and Repaint Example</title>
<style>
#example {
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="example">Example Div</div>
<button id="changeColorBtn">Change Color</button>
<button id="changeSizeBtn">Change Size</button>
<script>
document.getElementById('changeColorBtn').addEventListener('click', function() {
// 이 경우 리페인트만 발생.
document.getElementById('example').style.backgroundColor = 'lightcoral';
});
document.getElementById('changeSizeBtn').addEventListener('click', function() {
// 이 경우 리플로우와 리페인트가 발생.
document.getElementById('example').style.width = '300px';
document.getElementById('example').style.height = '150px';
});
</script>
</body>
</html>
위 예제에서:
changeColorBtn버튼을 클릭하면background-color가 변경되고, 리페인트가 발생합니다.changeSizeBtn버튼을 클릭하면 요소의 크기가 변경되며, 이는 리플로우와 리페인트를 모두 유발합니다.
요약
- 리플로우: 레이아웃 계산이 필요할 때 발생하며, 성능에 큰 영향을 줄 수 있습니다.
- 리페인트: 요소의 스타일 변화로 인해 화면에 다시 그려야 할 때 발생하지만, 리플로우보다는 덜 부담됩니다.
- 작은 DOM 조작이라도 레이아웃에 영향을 미치는 경우 리플로우를 유발할 수 있으므로 주의가 필요합니다.
- 최대한 DOM 조작을 최소화하고, 한 번에 여러 변경을 묶어 처리하는 등의 최적화 기법을 사용하면 성능 향상에 도움이 됩니다.
가상돔을 사용할때
: 가상돔을 사용하면 리플로우와 리페인트는 다음과 같은 과정을 거쳐 효과적으로 관리됩니다:
- 변경 사항 적용:
- UI 상태나 속성 변경으로 인해 컴포넌트가 다시 렌더링될 때, 리액트는 새로운 가상돔 트리를 생성합니다.
- 디프 알고리즘 실행:
- 리액트는 이전 가상돔 트리와 새로운 가상돔 트리를 비교(dif)하여 변경된 부분을 찾아냅니다.
- 재배치 작업 최소화:
- 변경된 부분만 실제 DOM에 적용하므로, 불필요한 재배치(reflow) 작업을 줄일 수 있습니다. 예를 들어, 텍스트 변경이나 색상 변경 같은 단순한 스타일 변경은 리플로우를 유발하지 않을 수 있습니다.
- 리페인트 관리:
- 최소한의 변화만 실제 DOM에 적용하기 때문에 리페인트도 필요한 만큼만 일어납니다.
리액트가 리플로우, 리페인팅을 최소화하는 방법
- 가상돔 디프 알고리즘: 리액트는 변경 사항을 메모리 내에서 가상돔을 통해 효율적으로 계산하기 때문에, 실제 DOM 조작을 최소화합니다.
- 배치 업데이트: 리액트는 여러 변경 사항을 한 번에 실제 DOM에 적용하기 위해 배치하여 업데이트를 최소화합니다.
- 최적화 기법: React.memo와 같은 최적화 기법을 사용하여 컴포넌트가 불필요하게 다시 렌더링되지 않도록 할 수 있습니다.
Frontend Developer