Why react?

일반적인 렌더링 과정

DOM tree, CSSOM -> render tree -> reflow - painting

virtual DOM

spa에서는 DOM조작이 많다. 즉, 변화를 적용하기 위해 브라우저가 많이 연산을 해야한다.

• DOM 조작의 실제 문제는

  • 30개의 노드를 하나하나 수정하면 30번의 잠재적인 레이아웃 재계산과 잠재적인 리렌더링을 초래한다.

virtual DOM은 실제 DOM에 적용되기 전에 가상 DOM에 먼저 적용 시키고 최종 결과를 실제 DOM에 전달한다. 즉, 브라우저 내에서 발생하는 연산의 양이 줄어들고 성능이 개선된다.

사실 virtual DOM 없이 할 수 있다. DOM Fragment에 적용하여 기존 DOM에 append 하면된다.

그럼 Virtual DOM이 궁극적으로 해결해주는건?

• 그 DOM fragment를 하나하나 작업할 필요 없이, 자동화해준다.

• 또한, 기존 값과 비교하여 어떤게 바뀌었고 어떤게 바뀌지 않았는지 즉, 기존 값을 파악하고 있어야 하는데(이케 안하면 수정할 필요가 없는 DOM트리도 업데이트할 수 있음)

  • 이걸 VirtualDOM이 자동으로 해준다.

자 그래서 다시 돌아와서

리액트를 쓰는 이유는 유지보수성이라고 할 수 있다.