React의 렌더링
먼저 React는 UI를 컴포넌트 단위라는 작은 단위로 나누어서 만든다.
그렇기 때문에 React 렌더링은 이 컴포넌트를 보고 화면에 어떻게 보여줄지 결정한 다음, 그걸 실제로 DOM 적용하는 과정을 말한다.
그럼 React의 렌더링은 어떻게 이루어질까?
1. 컴포넌트 생성 → 가상 DOM 생성
컴포넌트를 만들면, React는 이걸 가상 DOM으로 변환한다.
function Hello() {
return <h1>Hello, React!</h1>;
}이런 코드가 있다면, 화면에 h1 태그의 'Hello, React!'가 표출되어야 할 것이다.
하지만 React는 이를 바로 보여주지 않고, 내부적으로 아래와 같은 가상 DOM 객체를 만든다.
{
type: 'h1',
props: {
children: 'Hello, React!'
}
}[개념 알고가기 🔍]
1) 가상 DOM(Virtual DOM)이란?
가상 DOM은 실제 DOM(Document Object Model)의 가벼운 복사본으로,
React는 이걸 메모리 상에서 유지하면서 UI 변화를 먼저 여기에 반영한다.
즉, 실제 브라우저의 DOM을 직접 만지지 않고 모의 시뮬레이션을 해보는 느낌이다.
(DOM은 HTML을 브라우저가 이해할 수 있게 구조화한 트리 구조의 객체들을 말한다.)
실제 DOM은 느리기 때문에 DOM을 직접 바꾸는 작업은 브라우저에 많은 부담을 준다.
그래서 React는 직접 DOM을 건드리지 않고가상 DOM이라는 중간 단계를 둔 것이다!
2) 가상 DOM이 실제 쓰이는 방식
① 컴포넌트를 처음 렌더링 할 때
JSX를 기반으로 가상 DOM 트리를 만들고, 이걸 바탕으로 실제 DOM을 생성해서 브라우저에 보여준다.② 컴포넌트가 업데이트 될 때
변경된 내용을 반영한 새로운 가상 DOM을 만들고, 이전 가상 DOM과 새 가상 DOM을 비교(diffing)하여
바뀐 부분만 찾아서 실제 DOM에 적용한다. (최소한의 조작)
2. 실제 DOM으로 변경 (초기 렌더링)
처음 렌더링할 때는 React가 가상 DOM을 기반으로 실제 DOM을 생성해서 브라우저에 붙여준다.
* 이걸 마운팅(Mounting)이라고 함.
3. 상태(state)나 props 변경 → 리렌더링 발생
const [count, setCount] = useState(0);
위의 코드를 보면 버튼 클릭 시 setCount(1) 호출되고, React는 다시 컴포넌트를 재실행한다.
그리고 새 가상 DOM을 만들어서 이전 가상 DOM과 비교를 시작한다.
4. Diffing (차이 비교)
React는 이전 가상 DOM과 새로운 가상 DOM을 비교하여 바뀐 부분만 추려낸다. (예: <span>0</span> → <span>1</span>)
이 과정을 Diffing Algorithm이 처리한다. (효율적으로 트리 비교)
5. Reconciliation (진짜 DOM 업데이트)
Diffing 결과를 바탕으로 실제 브라우저의 DOM에 필요한 부분만 업데이트한다.
전체를 다시 그리지 않고, 바뀐 부분만 갱신하기 때문에 성능이 아주 좋고 부드럽다.
[요약]
컴포넌트 구현 → 가상 DOM 생성 → (초기) 실제 DOM으로 변환 → [상태 변경 발생] → 새 가상 DOM 생성
→ 이전과 비교 (Diffing) → 차이점만 실제 DOM에 반영 (Reconciliation) → 화면 업데이트 + 후처리 (useEffect 등)
'공부 > React' 카테고리의 다른 글
| [React] Props와 State란? (0) | 2025.04.25 |
|---|