React DOM이란? React 원리

React란?

사용자 인터페이스 구축을 위한 자바스크립트 라이브러리입니다.

 

리액트는 컴포넌트를 이용하여 사용자 인터페이스를 효과적으로 구축할 수 있습니다.

Props를 이용해서 데이터를 전달하고 State를 이용하여 상태 변화를 감지할 수 있습니다.

상태 변화를 감지하게 되면 컴포넌트를 업데이트 합니다.

 

하지만, React는 웹화면에 직접 렌더링 하지 않습니다.

React는 단지 컴포넌트화를 하고, 데이터를 전달하고 상태를 관리하는 라이브러리일뿐입니다.

 

사용자가 보는 웹 화면은 React DOM을 이용해서 업데이트를 진행합니다.

 

React DOM 이란?

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

실제 웹 화면에 렌더링 하는 역할을 합니다.

React에서 변경 사항이 생기면 React DOM에게 알려서 변경사항을 반영합니다.

 

React는 가상 DOM 개념을 사용하여 컴포넌트 트리를 React DOM에게 전달합니다.

컴포넌트에서 변경 사항이 발생해도 실제 DOM과 가상 DOM 차이가 없다면 반영하지 않습니다.

 

변경 사항이 발생하면, 실제 차이가 발생하는 부분만 업데이트 하게 됩니다.