React의 슬로건!
Learn Once, Write Anywhere
- React는 virtual dom(자바스크립트 객체) 을 생성하고 브라우저에 그리는 역할은 ReactDom이 한다.
- React는 virtual dom tree를 구성하고, 변경사항을 반영하고 새로 그리는 등의 역할을 한다.
- 이를 효율적으로 하기 위한 노력으로 fiber, reconciliation알고리즘 등이 있다.
(이와 같은 알고리즘이 없다면 virtual dom 방식이 더 비효율적일 수 있음) - virtual dom tree가 만들어졌고, 이를 브라우저에 렌더링 하기 위해 react는 virtual dom을 ReactDom에 넘긴다.
- ReactDom은이를 받아 ReactDom.render(최상위 컴포넌트) 메소드로 real dom(브라우저 dom)을그린다.
- 모바일 환경에서는 React Native가 ReactDom의 역할을 하는 것이고, (native ui element로 변환)
- PC환경에서는 Electron이 그 역할을 한다.
- 즉, virtualDom을 파싱해서 화면에 그리는 렌더링 엔진만 있다면 React 하나를 배워서 다양한 환경에 쓸 수 있다는 뜻이다.
요약
React
- 리액트는 virtual dom을 생성.
ReactDom, Electron, React Native
- virtual dom을 파싱해서 화면에 그리는 렌더링 엔진들
