React-DOM은 가상 DOM의 변화를 실제 DOM에 반영하기 위한 라이브러리입니다.
변화가 필요한 부분만을 효율적으로 업데이트함으로써, 성능을 최적화합니다.
코드를 수정할 때 REACT-DOM의 흐름을 간단하게 소개하면 아래와 같습니다.
REACT -> Virtual DOM -> React DOM-> DOM ->UI
React의 핵심적인 작동 메커니즘은
가상 DOM 재조정(Reconciliation) 과정 DOM과의 효율적인 상호작용
에 있습니다.
1. React Component Tree
React 애플리케이션은 컴포넌트로 이루어진 트리 구조입니다. 이 트리는 애플리케이션의 구조를 정의합니다.
2. 가상 DOM (React-DOM과 같은 뜻 아님.)
가상 DOM은 실제 DOM을 추상화한 메모리 내의 경량화된 표현입니다.
React는 이 가상 DOM을 사용하여 실제 DOM과의 직접적인 상호작용을 최소화합니다.
작동 방식: 컴포넌트의 상태가 변경되면, React는 먼저 변경 사항을 가상 DOM에 적용합니다. 이후, 변경된 가상 DOM과 이전 가상 DOM 사이의 차이점을 계산합니다. 이 과정을 통해 실제 DOM에 적용할 최소한의 변경 사항을 결정합니다.
3. Differing Algorithm:
React는 가상 DOM의 이전 상태와 새 상태를 비교하는 과정을 수행합니다. 이를 통해 실제 DOM에 어떤 변화가 필요한지를 파악합니다.
4. 재조정 (Reconciliation)
재조정은 React가 컴포넌트의 변화를 감지하고, 이를 가상 가상 DOM을 최신 상태로 업데이트합니다.
5. UPDATE
적용된 가상 DOM를 실제 DOM을 업데이트하는 과정입니다.
6. React DOM
React DOM은 가상 DOM의 변화를 실제 DOM에 반영하기 위한 라이브러리입니다. 변화가 필요한 부분만을 효율적으로 업데이트함으로써, 성능을 최적화합니다.
7.Browser's DOM (DOM)
React DOM에 의해 업데이트된 실제 DOM입니다. 이것은 브라우저가 사용자에게 보여주는 페이지의 구조입니다.
8.User Interface (UI)
최종적으로 사용자에게 보이는 인터페이스입니다.
변경 사항 및 이벤트
9. Reflects changes in
이 부분은 React가 Virtual DOM에서 이루어진 변경 사항을 실제 DOM에 반영하는 과정을 나타냅니다. 즉, 컴포넌트의 상태가 변경되면, 해당 변경 사항은 Virtual DOM에 먼저 적용되고, React의 Reconciliation(조정) 과정을 통해 실제 DOM이 최신 상태로 업데이트됩니다. 여기서 중요한 것은 React가 전체 페이지를 리로드하지 않고, 실제로 변경이 필요한 부분만을 선별하여 업데이트한다는 점입니다. 이는 효율적인 렌더링 성능을 가능하게 합니다.
10. Direct Interaction
이는 React 컴포넌트가 사용자와의 상호 작용(예: 클릭, 입력 등)을 처리하는 방식을 나타냅니다. 사용자의 상호 작용은 브라우저의 DOM 이벤트를 통해 직접 처리되며, 이러한 이벤트는 React 컴포넌트 내의 이벤트 핸들러로 전달됩니다. 즉, 사용자의 입력이나 액션이 발생하면, 이는 실제 DOM을 통해 직접 React의 이벤트 시스템으로 전달되고, React는 이를 기반으로 필요한 상태 변화를 진행합니다.
참고한 블로그
https://velog.io/@sbinha/React%EC%97%90%EC%84%9C-Virtual-DOM