React.js, DOM 설명

React JS :

Virtual DOM 을 통해 상태의 변함에 따라 선택적으로 UI를 렌더링 한다.

( 대규모 어플리케이션을 구축하거나 지속적인 데이터 변화에 대응하기 위한 목적 )

 

 

* Virtual DOM : DOM을 추상화 한 형태

 

Virtual DOM 사용 시, DOM 에 접근하여 조작하지 않고  추상화 시킨 자바스크립트 객체를 구성하여 사용 

  -> 데이터 업데이트 되면, 전체 UI를 virtual 에 리렌더링 한다.

  -> 이전 virtual 에 있던 내용과 현재 렌더링 한 내용을 비교

  -> 바뀐 부분만 DOM 에 적용됨

 

* JSX  : javascript의 확장 문법이다.  

          DOM 요소들을 만들 때 js형식이 아닌 xml과 같은 형식으로 작성하게 해줌. (권장사항임)

 

 

 

 

 

DOM (Document Object Model 문서 객체 모델) :

객체를 통해 구조화된 문서를 표현하는 방법 (xml, html로 작성됨) -> 트리형태의 모델로 저장하면 그게 DOM 이다.

DOM은 트리형태로 되어있어서 특정 노드를 찾거나 수정, 제거 할 수 있다.

 

트리는 노드(node)들로 구성됨

node : DOM트리에 존재하는 요소Element, 속성Attribute, text, html 전체를 나타내는 document 등이 해당됨

 

 

DOM 트리 

html  - head  -  title 

                   -   script

        -  body  -   h1

                    -   p

 

-> html은 루트노드, head와 body는 자식노드 이고 서로는 형제(sibling)관계 

 

 

 

 

DOM 문제점 : 

동적 UI에 최적화 되어 있지 않다! 

규모가 큰 웹어플리케이션은 DOM에 직접접근하여 변화를 주면, 느려지며 이슈가 발생함.

브라우저에서 DOM의 변화가 일어나면, css를 다시 연산하고 레이아웃을 구성해 웹페이지를 다시 그리는 과정이 시간이 낭비됨!!

 

-> 문제 해결 : 

     최소한의 DOM조작으로 개선해야함.

     예 ) DOM 업데이트를 4번 할경우 다시그리는 과정이 4번 -> 이를 묶어서 처리하거나 업데이트를 생략

     < React JS 는 Virtual DOM을 통해 DOM업데이트를 추상화 해 처리횟수를 최소화 하고 효율적으로 진행 >