//가상돔
//리액트나 ,뷰는 가상돔(VirtualDom)을 사용해서 원하는 화면을
//브라우저에 그려줍니다. 자체적으로 상당히 효율적인 알고리즘을 사용해서
//그리기 때문에 그속도가 엄청 빠름
//리액트로 프론트엔드를 개발하는 사람이라면 기본 소양정도로 가볍게라도
//가상돔에 대해 알고 넘어가는것이 중요
//DOM이란
//수 많은 컴포넌트로 구성된 웹페이지를 문서(document)라고하고
//수 많은 컴포넌트를 (element)라고함
//DOM은 이 element를 tree 형태(=DOM TREE)로 표현한것
//이 Tree의 요소 하나하나를 노드라고 부르고 각각의 노드는 해당 노드에
//접근과 제어(DOM)조작 할 수 있는 API가 존재
//ex) dom 사용 예시
// id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘.
document.getElementById("demo").innerHTML = "Hello World!";
// p 태그들을 모두 가져와서 element 변수에 저장해줘
const element = document.getElementsByTagName("p");
// 클래스 이름이 intro인 모든 요소를 가져와서 x 변수에 저장해줘
const x = document.getElementsByClassName("intro");
//ex)form validation에서의 사용예시
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname"/>
<input type="submit" value="Submit"/>
</form>
//1.가상돔
//가상 DOM은 실제 DOM과 구조가 완벽히 동일한 복사본 형태
//실제 DOM은 아니지만 , 객체(object)형태로 메모리에 저장되기 때문에
//실제 DOM을 조작하는 것 보다 훨씬 더 빠르게 조작을 수행할 수 있다
//실제DOM을 조작하는 것보다 메모리상에 올라와있는 javascript객체를
//변경하는 작업이 훨씬 더 가벼움
//2.DOM조작 과정
//ex)인스타의 하트를 눌렀을때 빨간색 하트에 해당하는 엘리먼트 DOM요소가 갱신돼야 함
//=> DOM을 조작해야 한다는 의미임
//2-1
//위 과정에서 리액트는 항상 2가지 버전의 가상DOM을 가지고 있음
//화면이 갱신되기 전 구조가 담겨있는 가상 DOM 객체
//화면 갱신 후 보여야 할 가상 DOM 객체
//리액트는 state가 변경돼야만 리렌더링이 되죠 그때 바로 2번에 해당하는
//가상 DOM을 만드는 거임
//2-2 diffing
//state가 변경되면 2번에서 생성된 가상돔과 1번에서 이미 갖고있는 가상돔에서
//어느 부분(엘리먼트)에서 변화가 일어났는지 상당히 빠르게 파악함
//2-3 재조정 (reconciliation)
//파악이 다 끝나면 , 변경이 일어난 그 부분만 실제 dom에 적용시킴
//적용시킬 때는 한건한건 적용시키는 것이 아니라,변경사항을 모두 모아 한 번만
//적용시킴
//Batch Update
// useState 시간에 리액트가 state를 batch 방법으로 update 한다는 것을 배웠음
//ex)setCount(count+1)이 3개가 있어도 하나로 인식함
//변경된 모든 엘리먼트를 한꺼번에 반영할 수 있는 방법이기도 함
//batch 의 장점
//리액트의 가장 비싼작업(오래걸리는 ,무거운)은 Painting(화면에 요소를 그리는 작업)인데
//클릭 한번으로 화면에 있는 5개의 엘리먼트가 바뀌어야 한다면
//실제 DOM 5번의 화면 갱신필요 (5번의 Painting)
//가상 DOM Batch Update로 인해 단 한번만 갱신 필요 (1번의 Painting)