React vs React DOM

Why do we import React and React-DOM separately?

What is React?

리액트가 무엇인고?

리액트란 User Interface를 만들기 위한 자바스크립트 라이브러리로, User Interface를 컴포넌트 형태로 구성하는 라이브러리일뿐, 웹 혹은 브라우저를 위한 라이브러리는 아니다.

React는 component, props, state, context를 관리해, 이들의 변경 사항을 파악해, 변경사항 snapshot을 React-DOM에게 전달한다.

출처: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

What is React-DOM

리액트돔은 무엇인고?

React-DOM은 Browser의 DOM에서 React를 사용하기 위한 라이브러리다.

React-DOM은 Web Interface로 웹과 직접적인 연관이 있으며, 실제 HTML요소를 화면에 불러오는 역할을 한다. wow

따라서 React-DOM은 React로부터 받은 변경사항 Snapshot과 실제 브라우저 DOM을 비교해 차이점을 확인한 후, 실제 Browser DOM을 조작한다.

즉, 실질적인 브라우저 DOM의 조작은 React-DOM이 하게되고, 리액트 컴포넌트의 업데이트들이 생겨, 이전과 차이가 발생할때 업데이트된다.

참고

• https://medium.com/programming-sage/react-vs-react-dom-a0ed3aea9745