#깊은 이해를 위한 문서 🔍

# React의 가상 DOM 작동 원리 1React의 가상 DOM(Virtual DOM)은 UI 변경을 효율적으로 감지하고 최소한의 변경만 실제 DOM에 반영하는 방식을 통해 성능을 최적화하는 핵심 기술입니다. 이를 통해 불필요한 렌더링을 방지하고 빠른 UI 업데이트를 제공합니다. ## 가상 DOM이 등장한 배경 웹 애플리케이션이 복잡해지면서, 기존의 DOM 조작 방식에는 다음과 같은 문제가 발생했습니다. - DOM 조작 비용이 크다: 직접적인 DOM 변경이 많아질수록 브라우저의 렌더링 성능이 저하됩니다.- 전체 페이지 리렌더링 문제: 특정 부분만 변경해도 전체 UI가 다시 그려지는 경우가 많습니다.- UI 성능 저하: 많은 DOM 업데이트가 발생하면 프레임 속도가 떨어지고 사용자 경험(UX)이 저하될 가능성이 높습니다. React는 이러한 문제를 해결하기 위해 가상 DOM을 도입했습니다. 가상 DOM을 활용하면 변경 사항을 먼저 계산하고, 최소한의 연산으로 실제 DOM을 업데이트할 수 있습니다. ## 개념 가상 DOM(Virtual DOM)은 실제 DOM의 경량화된 JavaScript 객체 모델입니다. React는 UI 변경이 발생하면 이 가상 DOM을 업데이트한 후, 변경된 부분만 실제 DOM에 반영합니다. 이 방식의 장점은 다음과 같습니다:- 빠른 연산 가능: 가상 DOM은 메모리에서 동작하므로 계산 속도가 빠릅니다.- 효율적인 업데이트: 변경 사항을 비교하여 최소한의 DOM 업데이트만 수행합니다.- 예측 가능성 향상: 선언적 UI 모델을 유지하면서도 최적화된 성능을 제공합니다. 2### 작동 방식 가상 DOM은 다음과 같은 과정을 거쳐 렌더링을 최적화해요. 1. UI 변경 감지: React는 컴포넌트의 상태(state)나 속성(props)이 변경되면 새로운 가상 DOM을 생성합니다.2. Diffing 알고리즘 적용: 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 요소를 찾습니다.3. 최소한의 변경만 반영: 변경된 부분만 실제 DOM에 적용하여 성능을 최적화합니다. 이 과정은 React의 핵심 알고리즘인 Reconciliation(조정 과정)을 기반으로 작동합니다. ## 시각적 다이어그램 다음 다이어그램은 가상 DOM의 작동 과정을 나타내요. 3🖥️ UI 변경 감지  ┌─────────────────────────────────┐  │           UI 변경 감지            │  │   (컴포넌트의 상태/props 변경 감지)   │  └─────────────────────────────────┘                │                ▼⚙️ 가상 DOM 업데이트  ┌─────────────────────────────────┐  │       가상 DOM 생성 및 업데이트      │  └─────────────────────────────────┘                │                ▼🔍 Diffing 알고리즘 적용  ┌─────────────────────────────────┐  │       이전 가상 DOM과 비교하여       │  │           변경된 요소 도출          │  └─────────────────────────────────┘                │                ▼💻 최소 변경 반영 (실제 DOM)  ┌─────────────────────────────────┐  │     변경된 부분만 실제 DOM에 반영     │  └─────────────────────────────────┘ 위 과정에서 가장 중요한 것은 Diffing 알고리즘입니다. React는 `key` 속성을 활용하여 변경된 노드를 빠르게 찾고, 효율적으로 업데이트할 수 있도록 설계되어 있습니다. ## 코드 예제 React의 가상 DOM을 활용하는 간단한 예제입니다. ```javascriptimport React, { useState } from 'react'; function Counter() {const [count, setCount] = useState(0);   return (    <div>    <p>현재 카운트: {count}</p>    <button onClick={() => setCount(count + 1)}>증가</button>    </div>  );} export default Counter;``` 이 코드에서 `setCount`를 호출하면 React는 새로운 가상 DOM을 생성하고, 이전 상태와 비교하여 변경된 부분만 실제 DOM에 반영합니다. 가상 DOM은 Redux나 MobX 같은 상태 관리 라이브러리와 함께 사용하면 더욱 강력한 성능을 발휘할 수 있습니다. 이러한 라이브러리는 상태(state) 변경을 추적하고, 변경된 데이터를 기반으로 UI를 효율적으로 업데이트하는 역할을 합니다.

# 커머스 도메인 이해하기 1이 문서는 커머스 도메인의 개념과 흐름을 설명해요. 커머스 도메인은 전자상거래 시스템에서 상품 판매, 주문 처리, 결제, 배송 등 거래 과정을 다루는 핵심 개념이에요.  효율적인 커머스 시스템을 구축하려면 도메인의 구조와 주요 요소를 이해하는 것이 중요해요. ## 1. 기본 개념 2커머스 도메인은 다음과 같은 핵심 요소로 구성돼요. - 상품(Product): 판매하는 물품이나 서비스  - 주문(Order): 소비자가 상품을 구매하는 행위  - 결제(Payment): 거래 대금을 처리하는 과정  - 배송(Shipping): 상품을 소비자에게 전달하는 절차  - 소비자(Consumer): 상품이나 서비스를 구매하는 사람  - 판매자(Seller): 상품이나 서비스를 제공하는 사람   이 요소들은 서로 긴밀하게 연결되어 있어요. 예를 들어, 주문(Order)이 생성되면 결제(Payment)가 진행되고, 결제가 완료되면 배송(Shipping) 절차가 시작돼요. ## 2. 유저 행동 흐름 3소비자가 상품을 구매할 때의 주요 과정은 다음과 같아요. 1. 상품 탐색 및 장바구니 추가: 소비자는 원하는 상품을 선택하고 장바구니에 추가해요.  2. 주문 및 결제 진행: 장바구니에서 주문을 확정하고 결제를 진행해요.  3. 결제 승인 및 주문 확정: 결제가 승인되면 주문이 확정돼요.  4. 배송 준비 및 출고: 판매자가 주문을 확인하고 상품을 포장한 후 출고해요.  5. 소비자에게 상품 도착: 택배 또는 다른 배송 수단을 통해 소비자에게 상품이 전달돼요.   이 과정에서 결제 승인 오류, 재고 부족, 배송 지연 등의 예외 상황이 발생할 수 있어요. 개발자는 이런 예외 처리를 고려해 로직을 설계해야 해요. ## 3. 도메인 흐름도 4아래 흐름도는 커머스 도메인의 주요 요소들이 어떻게 연결되는지 보여줘요.                 🛍️ 소비자 (Consumer)                      │        ┌─────────────┴─────────────┐        ▼                           ▼  ┌───────────────┐          ┌───────────────┐  │ 장바구니 (Cart) │    ──▶   │  주문 (Order)  │  └───────────────┘          └───────────────┘        │                           │        ▼                           ▼  ┌───────────────┐          ┌───────────────┐  │ 상품 (Product) │          │ 결제 (Payment) │  └───────────────┘          └───────────────┘        │                           │        ▼                           ▼  ┌───────────────┐          ┌───────────────┐  │재고 (Inventory)│          │ 배송 (Shipping)│  └───────────────┘          └───────────────┘                                    │                                    ▼                            ┌───────────────┐                            │ 판매자 (Seller) │                            └───────────────┘