브라우저 동작 원리

내가 만든 HTML 파일을 웹 브라우저에게 전송하면 파싱(인식)이 진행됨

• 해당 과정에서 DOM이 생성 → 정확하게는 Node들이 생성

이렇게 생성된 DOM을 화면에 어떻게 구성할까 구조를 작성하는것이 DOM Tree

• DOM Tree 구조는 DOM 요소들의 상하구조를 결정짓는 구조 자체

HTML는 뼈대 그 자체이므로 살을 붙이는 CSS 구조를 CSSOM Tree 구조로 작성

• CSS도 트리 구조로 작성하여 내가 원하고자 하는 태그에만 CSS 설정
• CSS 트리 구조는 body 부터 시작한다.

이렇게 DOM Tree와 CSSOM Tree를 합쳐 만든 것이 Render Tree이다.

• 이것을 기반으로 브라우저에 그리는 것을 렌더 혹은 렌더링이라 한다.

사용자가 글을 쓰거나 특정 작업을 했을 때 이벤트 리스너를 걸어 특정 요소를 제거하는 순간 특정 요소만 사라지는 것이 아닌 전체가 삭제되고 다시 렌더링 되는 구조이다.

→ 이것이 비효율적이라 생각해서 만들어진 것이 Ajax이며 특정 요소만 삭제하고 렌더링이 가능함

하지만, 현재 사용되고 있는 Ajax도 비효율적이라 생각했다

• 컴포넌트 내부의 요소를 삭제해도 삭제된 부분만 변경되는 것이 아니라 컴포넌트 자체를 삭제하고 다시 렌더링을 하게 되는 구조이기 때문이다.

가상DOM을 사용해서 컴포넌트 자체를 삭제하지 않아도 변경할 수 있다.

• 가상돔과 현재 변경된 부분의 차이점을 발견하고 차이점만 수정

→ 리액트를 사용하게 되는 이유