해당 포스팅에 틀린 정보가 있으면 알려주세요 🥲

React docs

자바스크립트를 확장한 문법 (html보다 js에 더 가까움)
이 문법은 react의 element를 생성
element는 react앱의 가장 작은 단위로 화면에 표시할 내용을 기술

const element = <h1>Hello, world</h1>;

DOM

DOM이란 문서 객체 모델로 스크립티 언어가 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당 (독립적인 인터페이스) -> 웹 페이지 문서를 계층적 구조와 정보로 표현하는 트리 자료구조

DOM 참고 블로그

렌더링

렌더링이란 서버로부터 HTML 파일을 찾아 브라우저에 뿌려주는 과정

렌더링 과정
1. 뷰 파일을 파싱하여 DOM 트리 생성
2. CSS를 파싱하여 CSSOM 트리 생성
3. DOM 과 CSSOM을 결합하여 렌더링 트리 생성
4. 랜더링 트리에서 각 노드의 크기와 위치를 계산
5. 개별 노드를 화면에 생성

렌더링 참고 블로그