React는 사용자 인터페이스를 보다 더 효율적으로 구축하기 위해 개발된 자바스크립트 라이브러리로, Facebook에서 처음 도입된 이후로 많은 기개발자들에게 사랑받고 있습니다. 리액트의 주요 특징 중 하나는 가상 DOM(Virtual DOM)을 활용한 최적화된 렌더링 기법입니다. 리액트가 어떻게 동작하는지에 대한 원리와,DOM, 가상 DOM과 그것이 브라우저 성능에 어떤 영향을 미치는지 알아보도록 하겠습니다.
DOM( Document Objext Model )이란
먼저 리액트의 동작원리를 이해하기 전에 DOM이란 무엇인지부터 이해하는 것이 중요합니다. DOM은 "Document Object Model"의 약자로, 웹 사이트의 HTML, head, body 같은 태그들을 자바스크립트가 조작할 수 있도록 객체 형태로 표현한 구조입니다. 이것은 웹 페이지를 구성하는 모든 요소들이 계층적인 트리 구조로 이루어져 있으며, 각 요소는 객체로 표현됩니다.
DOM은 자바스크립트와 같은 스크립팅 언어를 통해서 이러한 객체들을 동적으로 조작할 수 있습니다. 예를 들면 페이지의 특정 텍스트를 변경한다거나, 스타일 속성을 수정하는 등의 작업을 수행할 수 있습니다
DOM 렌더링
웹 페이지가 브라우저에 렌더링되는 과정은 위 그림과 같습니다. 이 그림에 대해서 간단하게 설명하자면,
1. HTML 파싱 : 브라우저는 HTML 코드를 읽고 DOM 트리를 만듭니다.
2. CSS 파싱 : 브라우저는 CSS 코드를 읽고 CSSOM(CSS Object Model)을 생성합니다.
3. 렌더 트리 생성 : DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다.
4. 화면 렌더링 : 렌더 트리를 바탕으로 화면에 콘텐츠들을 그립니다.
이 과정에서 <script> 태그가 있다면 자바스크립트를 로드하고 실행한 뒤, 나머지 HTML 파싱을 진행합니다. 그래서 DOM은 자바스크립트를 통해서 실시간으로 동적 변경이 가능합니다.
예를 들어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>Hello, DOM!</h1>
<p>DOM 예시 코드 입니다.</p>
</body>
</html>
다음은 간단한 HTML 코드 예시입니다. 이 HTML 코드는 DOM 트리로 표현해보자면 아래와 같습니다.
Document
├── html
│ ├── head
│ │ └── title
│ │ └── Text: "DOM Example"
│ └── body
│ ├── h1
│ │ └── Text: "Hello, DOM!"
│ └── p
│ └── Text: "DOM 예시 코드 입니다."
이러한 DOM 구조는 자바스크립트를 통해 접근하고 조작할 수 있습니다. 예를 들어, 특정 요소의 텍스트를 변경하려면 다음과 같이 자바스크립트 코드를 작성할 수 있습니다.
const titleElement = document.querySelector('h1');
titleElement.textContent = 'DOM을 변경합니다';
const paragraphElement = document.querySelector('p');
paragraphElement.textContent = '여기도 DOM을 변경합니다';
이처럼 DOM에 직접 접근하는 방법은 간단하지만, 반복적인 DOM 업데이트는 성능 저하의 큰 원인입니다. 이러한 문제를 해결하기 위해서 리액트(React)의 가상 DOM(Virtual DOM) 개념을 도입했습니다.
리액트 Virtual DOM
가상 DOM의 등장 배경은 실제 DOM의 비효율적인 렌더링 문제 때문입니다. 브라우저는 DOM을 업데이트할 때마다 전체 페이지를 다시 렌더링합니다. 특히 리액트는 SPA(Single Page Application)환경에서 주로 사용되는데, 이 경우 페이지의 복잡도가 증가하고 DOM 업데이트가 빈번하게 발생합니다. 이는 DOM의 일부를 변경했어도, 브라우저는 불필요한 렌더링 과정을 수행합니다. 이러한 문제 해결을 위해서 가상 DOM 개념을 도입하여, DOM 접근을 최소화하고, 성능하는데 큰 기여를 했습니다.
기존 자바스크립테에서는 반복적인 DOM 접근을 피하기 위해서 가상 DOM 개념을 도입하여 사용합니다. 가상DOM은 실제 DOM과 동일한 구조를 가진 메모리 내의 가상 객체입니다. 리액트는 컴포넌트의 상태가 변경될 때마다 가상 DOM을 업데이트하고, 가상 DOM과 실제 DOM의 차이를 비교하여 필요한 부분만 실제 DOM에 적용합니다.
-> 이를 통해서 불필요한 DOM 조작을 최소화하고 성능을 최적화할 수 있습니다.
가상 DOM 렌더링
1. 상태 및 프로퍼티 변경 감지 : 리액트 컴포넌트의 상태(state)나 속성(props)이 변경되면, 리액트는 가상 DOM에 이 변경사항을 기록합니다.
2. 가상 DOM 업데이트 : 상태 변경에 따라 새로운 가상 DOM이 생성되고, 이 가상 DOM은 메모리내에서만 존재합니다.
3. 가상 DOM 비교 : 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분을 확인합니다. 이를 다이프(diffs)라고 하며 변경된 부분만 찾아내는 작업입니다.
4. 실제 DOM 업데이트 : 비교 후 변경된 부분만 실제 DOM에 적용하여 브라우저가 다시 렌더링을 하도록 지시합니다.
이러한 과정을 통해서 리액트는 최소한의 DOM 조작을 수행하기 때문에 DOM에 직접 접근하는 것보다 성능이 크게 향상됩니다. 다시 말해서, 화면 전체를 다시 그리는 것이 아니라, 실제로 변화된 부분만 DOM에 반영하는것이 가상 DOM의 핵심입니다.
리액트의 리렌더링 조건
리액트는 리렌더링을 통해서 화면이 업데이트될 수 있습니다. 이러한 리렌더링 조건을 알고 있다면, 최소한의 코드와 동작만으로 화면을 설계할 수 있습니다. 리액트의 리렌더링 조건은 다음과 같습니다.
1. props 변경
부모 컴포넌트에서 자식 컴포넌트로 전달되는 props가 변경이 되면 해당 자식 컴포넌트는 다시 렌더링 됩니다.
2. state 변경
컴포넌트의 상태값이 변경되면 해당 컴포넌트는 다시 렌더링됩니다.
3. forceUpdate 호출
컴포넌트 내부에서 forceUpdate() 메세드를 호출하면 강제로 리액트 리렌더링이 일어납니다.
4. 부모 컴포넌트의 렌더링
부모 컴포넌트가 렌더링될 때 자식 컴포넌트도 함께 렌더링될 수 있습니다.
결론
리액트는 가상 DOM 개념을 활용하여 효율적으로 UI를 업데이트하는 자바스크립트 라이브러리입니다. Virtual DOM 개념은 실제 DOM 조작의 비효율성을 개선하고, 최소한의 DOM 업데이트만으로 성능을 최적화하는 데 큰 기여를 합니다. 이러한 리액트 동작원리를 이해하고 이점을 잘 활용한다면, 보다 더 나은 사용자 경험을 제공할 수 있습니다.
'프론트엔드 기록 > 리액트' 카테고리의 다른 글
| 빈 화면 없이 자연스럽게 데이터 갱신하여 SSR UX 개선하기 (0) | 2025.03.03 |
|---|---|
| 리액트 Flux 패턴이란?( vs MVC 모델 ) (2) | 2024.10.29 |
| [Next.js 14] FSD 기능 관점 폴더 아키텍처에 대한 생각 (2) | 2024.10.04 |
| NextJS 경로 가로채기 라우팅 (0) | 2024.09.02 |
| NextJS 서버 클라이언트 컴포넌트의 대한 고찰 및 전략 (0) | 2024.08.25 |
