5.4 KiB
React Frontend Development
📌 Brief Summary
React는 가상 DOM(Virtual DOM)과 컴포넌트 기반 아키텍처(CBA)를 활용하여 사용자 인터페이스를 효율적이고 선언적으로 구축하는 프론트엔드 라이브러리입니다 [1-3]. 브라우저의 비용이 많이 드는 Reflow와 Repaint 작업을 최소화하기 위해 '재조정(Reconciliation)' 알고리즘을 사용하며, 최신 버전에서는 Fiber 아키텍처와 자동 메모이제이션(React Compiler)을 통해 렌더링 성능을 극대화합니다 [1, 3-5]. 또한, 애플리케이션의 특성에 맞춰 CSR, SSR, SSG 및 React Server Components(RSC) 등 다양한 렌더링 전략을 지원하여 초기 로딩 속도, SEO, 상호작용(Interactivity)의 균형을 맞춥니다 [6-9].
📖 Core Content
-
브라우저 렌더링 과정 (CRP) 및 비용 최소화 브라우저의 중요 렌더링 경로(Critical Rendering Path)는 HTML과 CSS를 파싱하여 DOM과 CSSOM 트리를 생성하고, 이를 결합해 렌더 트리(Render Tree)를 만듭니다 [10, 11]. 이후 요소의 정확한 위치와 크기를 계산하는 레이아웃(Reflow) 단계와 화면에 픽셀을 그리는 페인트(Repaint) 단계를 거칩니다 [12, 13]. Reflow는 연산 비용이 매우 높으며, 잦은 Reflow와 Repaint는 성능 저하를 유발하므로 DOM 접근과 조작을 최소화하는 것이 필수적입니다 [14-16].
-
Virtual DOM 및 재조정 (Reconciliation) 실제 DOM의 직접적인 조작으로 인한 성능 저하를 막기 위해, React는 메모리에 가벼운 UI 표현인 Virtual DOM을 유지합니다 [1, 3]. 상태가 변경되면 새로운 Virtual DOM을 생성하고 이전 트리와 비교(Diffing)하여 변경된 부분만 실제 DOM에 업데이트합니다 [1, 3]. 이 재조정 알고리즘은 요소의 타입 비교 및 리스트의
key속성을 활용해 $O(n^3)$의 복잡도를 $O(n)$으로 최적화합니다 [17-20]. -
React Fiber 아키텍처와 동시성 렌더링 (Concurrent Rendering) React 16에 도입된 Fiber 아키텍처는 렌더링 작업을 'Fiber 노드'라는 작은 작업 단위로 분할하여 동시성 렌더링을 가능하게 합니다 [21-23]. 우선순위 기반 모델(Lane Model)과 시간 분할(Time-Slicing)을 적용하여, 사용자의 입력(타이핑, 클릭 등)과 같은 긴급한 작업이 들어오면 무거운 렌더링 작업을 잠시 중단(Yield)하고 메인 스레드를 비워두어 UI의 반응성을 유지합니다 [22, 24-26].
-
컴포넌트 기반 아키텍처 (Component-Based Architecture) 애플리케이션을 독립적이고 재사용 가능한 컴포넌트 단위로 분할하여 구축합니다 [27-29]. 각 컴포넌트는 자체 로직과 UI 상태를 캡슐화하여 렌더링하므로 유지보수성과 확장성이 높으며, 다른 프로젝트에서도 재사용하기 쉽습니다 [30-32].
-
렌더링 전략: CSR vs SSR vs SSG vs RSC
- CSR (Client-Side Rendering): 서버에서 빈 HTML을 받고 브라우저가 JavaScript를 다운로드하여 UI를 그립니다. 동적 상호작용에 유리하지만, JS 다운로드 전까지 화면이 보이지 않아 초기 로딩과 SEO에 불리합니다 [6, 33-35].
- SSR (Server-Side Rendering): 서버에서 HTML을 미리 렌더링하여 전송하므로 초기 콘텐츠 표시가 빠르고 SEO에 유리합니다 [7, 36, 37]. 이후 브라우저에서 JS를 연결해 상호작용을 가능하게 하는 수화(Hydration) 과정을 거칩니다 [7, 36, 38].
- SSG (Static Site Generation): 빌드 타임에 HTML을 생성하여 CDN으로 배포하므로 로딩 속도가 가장 빠릅니다 [8, 39].
- React Server Components (RSC): 서버에서만 렌더링되며 클라이언트로 JavaScript 번들을 전혀 보내지 않습니다 [9, 40]. 번들 크기를 줄이고 서버 데이터베이스에 직접 접근할 수 있으며, 상호작용이 필요한 곳에만 Client Component를 혼합해 사용할 수 있습니다 [41-43].
-
최신 렌더링 최적화 기법 (React 18 & 19)
- 자동 배칭 (Automatic Batching): React 18부터는 이벤트 핸들러뿐만 아니라 Promise, setTimeout 등 비동기 작업 내의 여러 상태 업데이트를 하나로 묶어(Batching) 단일 리렌더링만 유발합니다 [44-46].
- React Compiler: React 19에 도입된 빌드 타임 최적화 도구로, 개발자가 수동으로 작성하던
useMemo,useCallback을 제거하고 AST를 분석해 자동으로 메모이제이션 경계를 삽입합니다 [5, 47-49]. 이를 통해 불필요한 연산과 리렌더링을 지능적으로 방지합니다 [49, 50].
🔗 Knowledge Connections
- Related Topics: Virtual DOM, Critical Rendering Path (CRP), React Fiber, Component-Based Architecture, Client-Side Rendering (CSR), Server-Side Rendering (SSR), React Server Components (RSC)
- Projects/Contexts: Next.js, Single-Page Applications (SPA)
- Contradictions/Notes: React Compiler의 도입으로
React.memo,useMemo,useCallback과 같은 수동 메모이제이션이 90% 이상 불필요해졌으나, 서드파티 라이브러리의 불안정한 객체 참조를 다루거나 특정 Effect 의존성을 명시적으로 제어해야 하는 경우에는 여전히 탈출구(Escape Hatch)로써 수동 메모이제이션의 사용이 필요할 수 있습니다 [51-53].
Last updated: 2026-04-25