리액트를 사용 이유
npm 트렌드를 확인할 수 있는 사이트
최근 5년간 react, svelte, vue 사용량 비교
npm 트렌드 사이트 확인 결과 리액트가 Vue, Svelte 등 다른 프레임워크보다 훨씬 많은 사용자 기반 보유 중
리액트의 주요 장점
- 강력한 커뮤니티 지원
- 풍부한 교육 자료, 튜토리얼, 예제 코드.
- 다양한 서드파티 라이브러리 및 도구 제공.
- 광범위한 생태계
- 모바일 앱 개발도 가능 (e.g., React Native).
- ✅ 가상 DOM
- 불필요한 DOM 조작을 줄여 성능 최적화.
웹 브라우저 렌더링
크리티컬 렌더링 패스:브라우저가 HTML, CSS, JS 파일을 처리하여 웹페이지를 화면에 렌더링하는 과정
- URL 입력 → 브라우저가 서버에 요청
- 서버가 HTML, CSS, JS 등의 파일을 응답
- 브라우저가 HTML을 파싱 → DOM 생성
- CSS 파싱 → CSSOM 생성
- DOM과 CSSOM 결합 → Render Tree 생성
- 레이아웃 배치 → 각 요소의 위치와 크기 계산 🚨
- 페인트(Paint) → 화면에 픽셀 단위로 그리기 🚨
🚨: 계산 비용이 많이 드는 작업
⇒ 성능에 큰 영향을 줌
✅ 크리티컬 렌더링 패스 과정은 DOM이 업데이트될 때마다 반복적으로 발생
🤔 언제 업데이트되는가?
JS를 이용해서 DOM을 수정할 때마다 업데이트가 발생
- DOM 수정 → JS로 DOM API를 사용해 요소 변경
- 스타일 재계산 → 변경된 요소와 관련된 스타일 계산
- 레이아웃 계산 → 요소의 크기와 위치 재계산 (리플로우)
- 실제 화면 업데이트 → 픽셀로 다시 그리기 (리페인트)
🚨 리플로우와 리페인트
- 리플로우: 레이아웃 배치가 다시 이루어지는 과정(예:
width,height변경 시 발생) - 리페인트: 색상, 배경 등 스타일 변경 시 발생⇒ 리플로우나 리페인트 작업이 많아지면 웹사이트가 응답 불가 상태가 될 수 있음
추가) GPU가 관여할 수 있는 속성은 리플로우와 리페인트가 생략됨
- opacity
- transform
💡 성능 최적화: 리플로우와 리페인트를 줄이면 웹페이지의 성능이 향상됨
즉, DOM 업데이트를 한꺼번에 모아서 처리하면 DOM 수정 횟수를 최소화할 수 있음
코드예제
<body>
<button onclick="render()">추가</button>
<ul></ul>
<script>
//❌ DOM에 li를 추가할 때마다 리플로우와 리페인팅 작업이 일어나게 됨
function render() {
const ulEl = document.querySelector('ul');
for (let i = 0; i < 300; i++) {
ulEl.innerHTML += `<li>${i}</li>`;
}
}
//✅ 렌더링 성능 향상(ver)
//리플로우 최소화
function render2() {
const ulEl = document.querySelector('ul');
let liEls = "";
for (let i = 0; i < 300; i++) {
liEls += `<li>${i}</li>`;
}
ulEl.innerHTML = liEls; //변수로 모아뒀다가 한 번에 변경
}
</script>
</body>하지만 서비스 규모가 커지면 모든 업데이트를 하나하나 관리하기가 어려움 😵💫
👍 리액트에서는 이 코드적인 개선 과정을 생각하지 않아도 자동으로 처리해줌
리액트 렌더링
리액트는 가상 DOM을 사용해 DOM 조작을 효율적으로 관리함
가상 DOM이란?
실제 돔과 같은 내용을 담고 있는 복사본. 객체 형태로 메모리 안에 저장되어 있음.
실제 DOM 조작은 비용이 크기 때문에, 가상 DOM을 활용해 변경사항을 미리 계산한 후 모아서 한 번만 실제 DOM을 수정하도록 함. 이 과정을 재조정(Reconciliation)이라고 부름
🤔 그럼 이 가상 돔을 사용하면 항상 빠른 속도를 보장하는가?
⇒ ❌ 아닐수도 있음. 가상 돔을 생성하고 비교하는데도 연산이 소요되기 때문
가상 DOM의 처리 과정 (재조정)
- 렌더 페이즈 (Render Phase)
- 가상 DOM 생성
- 이전 가상 DOM과 비교하여 변경사항 계산(디핑)
- 비동기적 처리 가능
- 커밋 페이즈 (Commit Phase)
- 변경사항을 실제 DOM에 적용
- 동기적 처리, 중단 불가
