대학교 웹 개발 수업에서는 HTML, CSS, JS만으로 뭔가 다 만들었던거 같은데... 왜 React를 쓰게 된 걸까?
현재까지(2024.12) 웹 개발 프론트로 가장 많이 쓴다는 React 뭐가 좋아서 쓰는지 알아보도록 하자.
먼저 요약을 하자면
- 코드 생산성 향상
- 가상돔을 활용한 성능 향상
이 두가지 장점을 가지고 있기 때문이라고 한다.
1. 코드 생산성 향상
HTML, CSS, JS으로 개발하면, 코드를 5단계로 구분할 수 있다.
- HTML 작성
- 요소에 접근 (id, className 등 활용)
- 접근한 요소에 이벤트 리스너 생성
- 데이터 업데이트
- UI 변경
<!DOCTYPE html>
<html>
<body>
<span>count: 0</span>
<button id="button"> + </button>
</body>
<script>
let counter = 0;
const button = document.getElementById("button");
const span = document.querySelector("span");
function handleClick() {
counter = counter + 1;
span.innerText = 'count: ${counter}';
}
button.addEventListener("click", handleClick);
</script>
</html>
하지만, React로 개발한다면, 코드를 2단계로 줄일 수 있게 된다!
- JSX로 HTML을 생성과 동시에 이벤트 리스너까지 적용 [ 요소에 접근하는 과정 빠짐 ]
- useState로 데이터 업데이트 [ UI 변경코드 빠짐 ]
import React, { useState } from 'react';
function Counter() {
const [counter, setCounter] = useState(0);
const handleClick = () => {
setCounter(counter + 1);
};
return (
<div>
<span>count: {counter}</span>
<button onClick={handleClick}>+</button>
</div>
);
}
export default Counter;
버튼에 접근하기, 특정 HTML 요소 내용 바꾸기 코드가 빠진 것을 볼 수 있다.
지금 예시에서는 크게 느껴지지 않을 수 있지만, 이벤트 리스너 코드를 많이 사용할수록 편리함을 알 수 있다.
2. React의 Virtual Dom [Document Object Model]
React는 가상돔을 활용해 최소한의 실제 DOM 조작을 계산하여 성능을 향상한다.
가상DOM은 실제 DOM보다 훨씬 더 가볍다. = 조작하기 더 좋다.
DOM: 브라우저가 렌더링 엔진을 통해 관리하며, 각 노드가 다양한 정보를 포함 [ 이벤트 핸들러, 스타일 정보, 레이아웃 데이터, 기타 브라우저에서 필요한 속성들 .. ]
가상 DOM은 자바스크립트 객체의 형태로, 브라우저에 의존하지 않는 단순한 데이터 구조. UI의 상태와 구조를 표현하는 데 필요한 최소한의 정보만 포함하고 있음
(1) 가상돔 생성 & Diffing
React로 생성한 가상 DOM은 메모리에 두가지 버전으로 존재한다.
- 이전 상태 값을 저장한 가상 DOM
- 바뀔 상태 값을 저장한 가상 DOM
이 두가지 돔으로 React 내부에서 최적화된 비교 알고리즘(Diffing)을 사용해 필요한 업데이트만 추적한다.
그리곤, 실제 DOM에는 꼭 필요한 변경만 반영한다.
*Diffing 알고리즘은 브라우저가 직접 처리하는 레이아웃 계산과 렌더링 작업보다 훨씬 가볍다고 한다!
(2) Batching(배치 처리) & Reconciliation(재조정)
React는 여러 변경 사항을 배치 처리(한번에 적용)하여 DOM 접근 및 업데이트, 레이아웃 계산 횟수를 줄인다.
*1. 일반 DOM에서는 변경된 모든 노드를 브라우저가 직접 확인
2. 바뀐 노드부터 자식노드까지 삭제 후, 변경된 트리를 삽입
+ 바뀐 요소가 있을 때마다, 돔 접근 레이아웃 계산 및 리렌더
Vanilla JavaScript
// 비효율적인 코드
// DOM 접근 - 레이아웃 계산 - 렌더링 1234번 발생
function onClick() {
const $ul = document.getElementById("ul");
for (let i = 0; i < 1234; i++) {
$ul.innerHTML += <li>${i}</li> ;
}
}
// 조금 더 효율적인 코드
// 브라우저에서 ul id 가진 노드 찾기
// ul가 루트인 트리를 제거하고, 변경된 트리를 삽입
// DOM 접근, 레이아웃, 렌더링 한번만 처리하긴 함
function onClick() {
const $ul = document.getElementById("ul");
let list = "";
for (let i = 0; i < 1234; i++) {
list += '<li>${i}</li>';
}
$ul. innerHTML = list;
}
React
- 새로운 가상 DOM 생성
- Diffing
- 변경된 1234개에 대해 한 번에 실제 DOM에 반영
- 브라우저는 필요한 레이아웃 계산과 렌더링을 한 번만 수행
하지만, Svelte라는게 React 이후에 나왔다는데 성능이 React보다 좋다고 한다.
컴파일 시점에서 이벤트 발생 시 DOM 조작법을 계산하고, 이를 토대로 동작하기 때문에 계산 과정이 빠져 빠르다고 한다.
뭐가 자꾸 나온다....
[ 잘못된 내용이나, 알려주실 지점이 있다면 댓글 환영입니다 ㅎㅎ ]
'FE > React' 카테고리의 다른 글
| React useRef vs useState (0) | 2025.02.13 |
|---|---|
| react-hook-form, register 렌더링 분석 (0) | 2025.01.19 |
| Recoil 메모리 누수 확인하기 (0) | 2025.01.11 |
| Recoil (0) | 2024.12.27 |
| npm vs yarn (0) | 2024.12.26 |
