HTML 이 웹 브라우저를 만나 파싱되는 과정을 거치는데 이 과정을 렌더링이라 한다.
HTML이 파싱되면서 자바스크립트 객체로 바뀌게 되고 HTML element들은 전부 자바스크립트 클래스 인스턴스로 변환되게 된다.
이때 자바스크립트로 인식할수 있게된 문서를 이루는 클래스들이 DOM 입니다.
DOM tree 구조
그림으로 보시면 document 밑에 body 자식, 그 밑에 div 등등 이렇게 벋어나가는 구조들입니다. 여러 자식들이 잎으로 생각한다면 여러 잎들이 모여서 하나의 큰 document라는 구조를 만듭니다.
리액트 에서는 가상DOM 과 브라우저 DOM 두가지 DOM이 존재한다.
가상 DOM 이란 화면이 어떤 모습이어야 하는지 개발자가 작성한 내용과 실제 화면에 렌더링 되는 것 사이에 존재하는 레이어 라고 이해할수 있다.
브라우저에서 상호작용하는 화면은 반드시 브라우저 DOM 을 수정해야하지만 과도한 DOM 수정은 성능 저하를 불러올 수 있다.
리액트는 페이지의 변화를 바로 렌더링하지 않고 메모리에 존재하는 가상DOM에서 변화가 필요한 곳을 계산하고 최소한의 사항만 렌더링 한다.
다만 RN은 브라우저의 DOM으로 렌더링 하는 대신!
objective-C API 호출하여 iOS 컴포넌트로 렌더링,
자바 API 호출하여 안드로이드 컴포넌트로 렌더링한다.
RN 은 다른 타겟으로 렌더링 할 수 있다!
왜냐하면 RN의 브릿지가 대상 플랫폼의 네이티브 UI 요소에 접근하는 인터페이스를 제공하기 때문입니다.
프론트엔드 개발자