1. 브라우저 렌더링 과정
엔진마다 렌더링 조금씩 다름, 크롬 기준으로 볼거임
(브라우저의 주요 기능은 사용자가 선택한 자원(보통 html)을 서버에 요청하고 브라우저에 표시하는 것)
* DOM은 document object model의 약자이며, 한글로는 "문서 객체 모델"이라고 부릅니다. DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식
문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미
태그가 노드객체로 변환되고
연관성 갖을 수 있도록 트리를 생성함 이게 바로 DOM트리임
최상위에는 document객체가 들어감
DOM tree 생성되고, CSS도 CSSOM tree생성됨
그리고 렌더링 엔진이 DOM트리와 CSSOM 트리 합쳐서 render tree렌더트리 생성
렌더트리는 화면에 표시될 모든 정보 포함하는 트리임
렌더트리가 생성된다음 layout이라는 과정 거침 (reflow라고도 함)
뷰포트에 맞춰서 요소들의 정확한 위치랑 크기를 계산하는 과정임
계산하고 화면에 실제 픽셀로 변환해서 그리는 페인트 과정함
사용자가 정보 업데이트 했을때는?
3가지 경우로 동작함
1. 레이아웃이 다시 발생하는 경우 – 크기 위치
2. 페인트부터 다시 발생되는 경우 -텍스트 이미지
3. 레어어의 합성만 다시 발생
2. virtual dom
문제는
변화가 발생할때마다 렌더트리가 다시 생성된다는 것이다.
이 과정을 다시 반복하게 됨.
게다가 최근에는 SPA, single page application(페이지를 변경하지 않고 동일한 페이지에서 조작
페이지를 서버가 아닌 브라우저에서 관리)을 많이 사용하면서 dom tree를 변경할 일이 많아졌음
그래서 virtual dom이 등장했다.
가상돔에 생긴 변경사항을 반영해서 전체 real dom을 바꾸지 않아도 됨
이런 처린 실제 돔 아닌 메모리상에서 동작해서 훨씬 빠름
가상돔은 실제로 렌더링 되지 않아서 연산비용을 최소화할 수 있다.
virtual dom이 하는 것은
DOM fragment의 변화를 묶어서 적용한 다음
기존 DOM에 던져주는 과정을 자동화, 추상화해놓은 것이다.
리액트가 가상돔을 이용하는 자바스크립트 라이브러리다.
ui의 가상적인 표현을 메모리에 저장하고 reactDOM과 같은 라이브러리에 의해
실제돔과 동기화하는 프로그램이다.
리액트는 JSX를 사용하는데, 각 컴포넌트에서 리턴되는 react element를 JSX문법으로 작성하는 것이다.
JSX는 자바스크립트 확장 문법이다.
바벨이 JSX를 React.createElement()호출로 컴파일한다. 컴파일하는 걸 보면 React elemet객체를 리턴하는 것을 볼 수 있다.
React elements는 DOM요소의 가상 버전으로 가볍고 상태가지지 않고 불변성 유지한다.
render에 의해서 실제 돔에 반영한다
https://www.youtube.com/watch?v=PN_WmsgbQCo&t=20s
'웹 공부' 카테고리의 다른 글
| 값복사 (0) | 2022.06.07 |
|---|---|
| 브라우저는 어떻게 동작하는가 (0) | 2022.05.30 |
| git 메뉴얼 정리함 (0) | 2022.05.18 |
| 시퀄라이즈 테이블 코드 자동 생성하는 법(mysql,database,sequelize) (0) | 2022.03.10 |
| rollbackFailedOptional 문제 (0) | 2022.02.28 |