20240130 TIL #27

[1] TIL

  1. DOM

   (1) DOM : Document Object Model

     1) document object를 홍보하기위한 수단

     2) 여러 컴포넌트로 구성된 웹페이지 : 문서(document)

     3) 그 페이지를 이루는 컴포넌트 : element

     4) DOM은 element를 tree 형태로 표현한 것 : DOM tree

   (2) 리액트, 뷰 => 가상 DOM 채택

     1) 가상 DOM으로 렌더링 : 효율적인 알고리즘을 이용하여 속도가 엄청 빠름

     2) API : html 요소에 접근해서 수정할 수 있는 함수

 

  2. Virtual DOM

   (1) 실제 DOM의 tree 형태를 그대로 가져온 것이 virtual DOM

     1) 실제 DOM을 복사한 것

     2) virtual DOM은 실제 DOM은 아니지만, 객체 형태로 메모리에 저장

     3) 더 빠르게 조작할 수 있기 때문에 실제 DOM보다 더 빠르게 UI를 구성함

   (2) 렌더링

     1) DOM을 조작하여 DOM의 요소인 element가 갱신되어야 함

     2) react는 화면 갱신 전, 후의 가상 DOM 객체를 모두 갖고 있음.

   (3) diffing 

     1) state가 변경되면 두 DOM을 비교해서 어디가 변했는지 상당히 빠르게 파악함 (feat. 리액트 자체 알고리즘)

   (4) reconciliation

     1) 변경이 일어난 그 부분만 실제 DOM에 적용

     2) 한 건, 한 건 적용시키는 것이 아니라 batch update

       - DOM에서 가장 비싼 작업 = 가장 오래 걸리는 작업

       - 그 작업이 painting : 화면에 element를 그려주는 작업