1. React란?
React는 페이스북(현 메타)에서 개발한 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다.
가장 큰 특징은 컴포넌트 기반 아키텍처(Component-Based Architecture)를 채택했다는 점입니다. 레고 블록을 조립해 하나의 큰 구조물을 만들듯, 독립적이고 재사용 가능한 UI 조각인 컴포넌트(Component)들을 조합하여 복잡한 UI를 효율적으로 개발할 수 있습니다.
또한, SPA(Single Page Application)와 Virtual DOM 개념을 통해 웹 애플리케이션의 성능을 최적화하고 사용자 경험(UX)을 크게 향상시켰습니다.
2. SPA (Single Page Application)
SPA(단일 페이지 애플리케이션)는 말 그대로 하나의 HTML 파일과 여러 JavaScript 파일로 구성된 웹 애플리케이션을 의미합니다.
전통적인 웹사이트가 새로운 페이지로 이동할 때마다 서버로부터 전체 HTML 파일을 새로 받아와 렌더링(서버 사이드 렌더링)하는 방식과 달리, SPA는 최초 로딩 시에만 하나의 HTML을 받아오고 그 이후에는 페이지 전체를 새로고침하지 않습니다.
대신 사용자의 상호작용에 따라 필요한 데이터만 서버로부터 비동기적으로 받아온 후, JavaScript를 사용해 동적으로 화면의 특정 부분만 업데이트합니다. 이를 통해 부드러운 사용자 경험을 제공할 수 있습니다.
3. Virtual DOM (가상 DOM)
Virtual DOM은 React 성능 최적화의 핵심이자, 많은 개발자들이 React를 선택하게 만든 주요 요소입니다. 이는 기존 DOM의 비효율적인 렌더링 방식을 개선하기 위해 도입된 메모리상의 가상 표현입니다.
Virtual DOM의 동작 원리
React는 데이터가 변경될 때마다 실제 DOM에 직접 접근하여 변화를 주는 대신, 다음과 같은 중간 계층을 거칩니다.
- 데이터 변경: 사용자의 행동(클릭, 입력 등)으로 인해 컴포넌트의 상태(데이터)가 변경됩니다.
- 가상 DOM 생성: 변경된 최신 상태를 기반으로 새로운 가상 DOM 트리를 메모리상에 생성합니다.
- 기존 가상 DOM과 비교 (Diffing): 새로 생성된 가상 DOM과 이전 상태의 가상 DOM을 비교하여 정확히 어떤 부분이 변경되었는지 찾아냅니다. 이 과정을 "Diffing(비교)"이라고 합니다.
- 실제 DOM에 반영 (Reconciliation): React는 Diffing을 통해 파악된 변경사항들을 모아서 한 번에 실제 DOM에 적용합니다. 이 과정을 "재조정(Reconciliation)"이라고 합니다.
Virtual DOM의 장점
- 성능 향상: 실제 DOM 조작은 비용이 큰 작업입니다. Virtual DOM은 변경사항을 모아서 한 번만 처리(Batch Update)하므로, 불필요한 리렌더링을 최소화하고 DOM 접근 횟수를 줄여 성능을 향상시킵니다.
- 개발 편의성: 개발자는 데이터(State)만 변경하면 React가 알아서 화면을 효율적으로 업데이트해주므로, 복잡한 DOM 조작 로직을 직접 작성할 필요 없이 비즈니스 로직에만 집중할 수 있습니다.
Virtual DOM의 단점
- 메모리 사용량 증가: 실제 DOM 외에도 메모리상에 가상 DOM을 유지해야 하므로 추가적인 메모리 사용량이 발생합니다.
- 추상화: DOM 조작 과정이 추상화되어 있어, 내부 동작 원리를 정확히 파악하지 않으면 미세한 성능 튜닝이 어려울 수 있습니다.
