1-1. DOM 이란?
“DOM은 HTML, XML document와 상호작용하고 표현하는 API이다.
DOM은 browser에서 로드되며,
Node(이하 노드) 트리(각 노드는 document의 부분을 나타낸다)로 표현하는 document 모델이다.
ex. element, 문자열, 혹은 코멘트”
-MDN-
html이 dom인가??? -> X
IDE에서 작성한 HTML은 DOM이 아니고
작성된 HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 트리가 DOM입니다.
이렇게 하는 이유는 프로그래밍 언어가 페이지와 상호 작용할 수 있게 하기 위해서 입니다.
DOM API는 JavaScript와 같은 스크립팅 언어를 이용해서 해당 문서에 노드 추가, 삭제, 변경, 이벤트 처리, 등 수정을 가능케 합니다.
1-2. 노드(node)란?
참고자료 : Node에 대하여-자바스크립트/node/nodeName/nodeValue
HTML문서에 관한 모든 것을 담고 있는, 계층적 정보 단위
HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다.
이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다.
노드 트리는 최상위 레벨인 루트 노드(root node, 사진에서 Document)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다.
자바스크립트에서는 HTML DOM을 이용해 노드 트리에 포함된 모든 노드에 접근할 수 있다.
노드의 종류
node.js란?
참고자료 : [Node.js] 개념 이해하기
Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임
- Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램이다.
- Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경)이다.
- Node.js는 서버사이트 스크립트 언어가 아니다. 프로그램(환경)이다.
- Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다.
Node.js 사용이유
-
Node.js를 사용하려면 먼저 JavaScript를 배워야한다.
-
Node.js는 JavaScript를 사용하기 위해 만들어진 것이기 때문이다.
-
JavaScript는 C/C++, Java 와 같은 프로그래밍 언어이다.
하지만 이름에서 알 수 있듯 JavaScript는 독립적인 언어가 아닌 스크립트 언어이다. -
스크립트 언어는 특정한 프로그램 안에서 동작하는 프로그램이기 때문에 웹 브라우저 프로그램 안에서만 동작을 한다.
즉, 웹 브라우저(크롬, 사파리, 익스플로러, 파이어폭스 등)가 없으면 사용할 수 없는 프로그램이다.
여기서 Node.js가 나오는 이유가 된다. -
즉, JavaScript 를 웹 브라우저에서 독립시킨 것으로 Node.js를 설치하게 되면 터미널프로그램(윈도우의 cmd, 맥의 terminal 등)에서 Node.js를 입력하여 브라우저 없이 바로 실행할 수 있다.
하지만 JavaScript에서 분리된 언어이기 때문에 문법은 같다.
이렇게 Node.js를 이용하여 웹 브라우저와 무관한 프로그램을 만들 수 있게 되었다.
중요한 것은 Node.js를 이용하여 서버를 만들 수 있다는 것이다.
중요한 이유는 이전까지 Server-Client 웹사이트를 만들 때 웹에서 표시되는 부분은 JavaScript 를 사용하여 만들어야만 했으며, 서버는 Reby, Java 등 다른 언어를 써서 만들었어야 했는데 마침내 한 가지 언어로 전체 웹 페이지를 만들 수 있게 된 것이다.
2-1. DOM을 조작했을 때 브라우저가 동작하는 방식
1. DOM Tree 생성
브라우저가 HTML을 전달 받으면 브라우저의 렌더 엔진이 이를 파싱해서 DOM 노드로 이루어진 트리를 만듭니다.
2. Render Tree 생성
DOM 트리의 노드들의 attach 메소드가 실행된다. attach 메소드는 스타일 정보를 계산해서 객체 형태로 반환합니다. 다시 말해 렌더 트리 과정에선 각 요소들의 스타일이 계산되고 이 계산되는 과정에서 다른 요소들의 스타일 속성들을 참조합니다.
3. Layout (reflow)
렌더 트리가 만들어지고 나면 각 노드들은 스크린의 좌표가 주어지고 정확히 어디에 나타나야 할지 위치가 주어집니다.
4. Painting
렌더링된 요소들에 색을 입히는 과정, 트리의 각 노드들을 거쳐가며 paint 메소드를 호출합니다.
3-1. Virtual DOM
Virtual DOM은 DOM을 직접 조작하지 않고
변경사항을 하나의 가상 돔에 모았다가 DOM에 한 번에 보내는 기술입니다.
DOM 조작의 연산 비용을 줄일 수 있는 방법으로 나온 대안이 Virtual DOM입니다.
React는 실제 DOM의 변경 사항을 빠르게 파악하고 반영하기 위해
내부적으로 가상 DOM을 만들어서 관리합니다.
Virtual DOM은 일종의 DOM 캐싱, DOM 버퍼링이라고 할 수 있습니다.
가상 DOM은 DOM이 생성되기 전에 아래와 같은 비교 과정을 수행합니다.
연산이 끝나고 그 최종 변화를 실제 DOM에 던져줍니다.
모든 변화를 하나로 묶어서 딱 한 번만 주는거기 때문에
레이아웃 계산과 리렌더링의 규모는 커지겠지만 DOM 연산의 횟수가 줄어듭니다.
만약 virtual DOM을 통한 절차를 거치지 않았다면 전체 노드가 빨간색 (변화 대상)이 되었을 것 입니다.
DOM 조작 자체가 문제가 되는 것은 아니지만
사소한 변경사항에도 전체가 리렌더링된다면 효율적인 연산은 아니겠지요.
*요약하자면
뷰에 변화가 있을 때 실제 DOM에 적용되기 전에 가상의 DOM에 먼저 적용시키고
그 최종적인 결과를 실제 DOM으로 전달해줍니다.
이는 브라우저 내에서 발생하는 연산의 양을 줄여줍니다.
→ “리액트에서 감지한 변화들을 모아 DOM에 전달한다”는 흐름은 아래 내용들을 이해하는데 도움이 됩니다.
3-2. 리액트에서 감지한 변화들을 모아 DOM에 전달한다
리액트가 컴포넌트의 변화를 감지해야 렌더링을 시킬 수 있는데
리액트가 컴포넌트를 감지하는 방법을 이해하지 못하고 리액트에서 권장하는 방법에 맞춰 사용하지 않으면
리액트가 변화를 감지하지 못할 수 있습니다.
1. setState로만 값을 변경해줘야 하는 이유 = 불변성을 유지해야 하는 이유
값이 변경 되었다는걸 판단하기 위해 리액트는 객체로 저장된 state를 비교 연산합니다.
객체 비교시 판단 근거는 객체의 메모리 주소인데 직접 값을 수정하면 메모리 주소가 동일하여 리액트는 변화를 감지하지 못합니다. 상태 변경을 추적하고 변경에 따라 구성요소를 다시 렌더링하려면 setState를 사용해야 합니다. map, filter, spread 문법을 사용해서 새로운 배열을 반환하라는 이유도 그것때문입니다.
2. react에서 props로 key를 넘겨줘야 하는 이유
고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하면 돼서 불필요한 렌더링을 없애줍니다.
돔은 html을 가져와 파싱한 결과물임
처음에 bytes로 받고 그것을 문자열(Characters)로 변환한 후, 토큰으로 분리한 후 돔 오브젝트를 구성한 노드를 만들고, 노드들을 가지고 중첩관계를 만들게 된다 > Html의 파싱 과정
4-1. 가상돔의 탄생
4-2. 가상돔에 대한 오해
리액트는 왜 버츄얼돔을 사용했을까?
