웹 브라우저의 진화와 SPA의 탄생

과거의 웹페이지는 단순히 텍스트와 이미지를 보여주는 정적인 문서에 가까웠습니다. 사용자가 링크를 클릭할 때마다 서버에서 새로운 HTML 파일을 통째로 받아와 화면 전체를 새로고침하는 방식이었습니다. 하지만 웹이 점차 발전하면서, 오늘날의 웹은 마치 하나의 데스크톱 애플리케이션처럼 실시간으로 데이터를 주고받으며 동적으로 화면을 업데이트해야 하는 요구를 받게 되었습니다.

이러한 변화 속에서 등장한 것이 바로 단일 페이지 애플리케이션인 SPA(Single Page Application)입니다. SPA는 처음에 단 한 번만 페이지를 로드한 뒤, 이후에는 필요한 데이터만 서버에서 비동기식으로 받아와 브라우저 화면의 일부만 동적으로 갱신합니다. 이를 통해 웹을 사용할 때 화면이 깜빡이지 않고 매끄럽게 작동하는 최상의 사용자 경험을 제공하게 되었습니다.

진짜 DOM은 왜 느려질까? DOM 조작의 무거운 비용

하지만 SPA의 유행은 브라우저 성능에 새로운 도전 과제를 던졌습니다. 브라우저가 화면을 그리는 기본 단위인 DOM(Document Object Model)을 자바스크립트로 직접 제어할 때 발생하는 병목 현상 때문입니다. 브라우저는 HTML 문서의 구조를 트리 형태로 표현한 DOM을 다룰 때마다 화면의 레이아웃을 다시 계산하고 그리는 작업을 수행합니다.

이 과정을 리플로우(Reflow)와 리페인트(Repaint)라고 부릅니다. 아주 사소한 텍스트 하나만 변경되어도 브라우저는 주변 요소들의 위치를 전부 재계산하고 화면을 다시 그려야 하는 엄청난 비효율에 직면하게 됩니다. 비유하자면, 거실에 있는 탁자 위치를 조금 옮기기 위해 집 전체의 설계도를 새로 그리고 집을 통째로 허물고 다시 짓는 것과 유사합니다. 사용자의 상호작용이 수천, 수만 번 발생하는 현대 웹에서 이러한 무거운 연산은 성능 저하의 주범이 되었습니다.

React 시작과 가상 DOM(Virtual DOM)의 핵심 원리

이 문제를 해결하기 위해 등장한 혁신적인 프레임워크가 바로 페이스북(현 메타)에서 개발한 React입니다. React 원리의 핵심은 브라우저의 진짜 DOM을 직접 건드리는 대신, 메모리상에 가벼운 가짜 복사본을 만들어 다루는 Virtual DOM(가상 돔) 개념입니다. React 시작과 동시에 개발자들은 DOM 조작의 무거운 제약에서 벗어나 더 직관적인 개발이 가능해졌습니다.

가상 DOM의 작동 방식은 의외로 간단합니다. 상태 변화가 감지되면 React는 진짜 DOM이 아니라 메모리에 존재하는 가상 DOM에 먼저 변화를 반영합니다. 그런 다음 이전 버전의 가상 DOM과 새롭게 업데이트된 가상 DOM을 비교하여 실제로 바뀐 부분만 찾아냅니다. 이 탐색 과정을 디핑(Diffing)이라고 부릅니다.

바뀐 부분들을 전부 찾아내면, React는 이를 딱 한 번에 모아서 실제 DOM에 한꺼번에 반영하는 패치(Patch) 작업을 수행합니다. 즉, 10번의 변화가 일어났을 때 실제 DOM을 10번 다시 그리는 것이 아니라 가상 DOM에서 10번 계산한 최종 결과물만 단 한 번 실제 DOM에 전달하는 것입니다. 덕분에 무거운 브라우저 렌더링 과정을 대폭 줄일 수 있습니다.

선언형 UI가 가져다준 개발 생산성의 혁신

가상 DOM이라는 강력한 기법 덕분에 개발자들은 성능 고민을 덜었을 뿐만 아니라, 개발 방식에서도 큰 전환을 맞이했습니다. 기존에는 화면을 바꿀 때마다 어떤 엘리먼트를 찾아서 어떻게 수정할지 명령하는 명령형(Imperative) 방식으로 코드를 작성해야 했습니다. 반면 React는 화면이 특정 상태(State)일 때 어떻게 보여야 하는지만 정의하는 선언형(Declarative) UI 패러다임을 제안합니다.

선언형 프로그래밍 스타일을 사용하면 코드가 훨씬 직관적이고 예측하기 쉬워집니다. 상태가 바뀌면 React가 알아서 변경된 최적의 경로를 찾아 가상 DOM을 거쳐 실제 화면에 조용히 반영해주기 때문입니다. 결국 React 원리는 브라우저 성능을 고도로 최적화하는 동시에 개발자의 생산성까지 극대화하는 두 마리 토끼를 모두 잡은 셈입니다.