💻 Virtual DOM 사용

Virtaul DOM이란?

• DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.

여기서 DOM이 뭔대?라는 물음표가 생겨 다시 DOM을 검색하여 정리해 보았습니다.

• DOM이란?(Document Object Model)

  객체를 문서 구조를 표현하는 방법으로 XML or HTML로 작성합니다.
  이것을 활용하여 객체에 JS와 CSS를 적용하고, DOM은 트리 형태여서 특정 node를 찾아서 수정/제거가 할 수 있습니다.

• DOM TREE 구조
  

아직까지 뭔지 모르겠다면 정말 간단하게 표현한다면 이렇게 표현할 수 있습니다.

1. DOM-TREE 구조를 복사하여 리랜더링 합니다.
2. 수정할 부분을 리랜더링 한 사본(복사본)에 수정합니다.
3. 이전 DOM-TREE 구조와 복사 후 수정/추가/제거한 DOM-TREE 구조를 비교합니다.
4. 바뀐 부분만 실제 DOM-TREE에 적용합니다.

이렇게 보면 Virtual DOM의 원리를 알 수 있습니다.

Virtual DOM을 사용하면 일단 DOM보다는 속도가 빠르긴하지만,
저희가 React를 사용하는 이유는

지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축

하기 위해서 입니다. 업데이트 처리를 간결하게 처리하고 ui 업데이트 과정에서 복잡함을 없애고, 쉽게 업데이트를 할 수 있도록 도와주기 때문에 요즘 많은 기업들이 사용하고 있습니다.

💻 리액트는 프레임워크?

react는 프레임워크가 아닙니다. js에 속한 라이브러리 입니다.
오로지 react는 view만 신경쓰고 다른 기능은 다른 라이브러리를 사용하여 개발합니다.
자주 쓰는 라이브러리로는

1. 상태관리 redux
2. 라우팅 react-router
3. ajax axios

등이 있습니다. 또한 react는 다른 프레임워크와 같이 사용가능합니다.
ex) javascript, backbone ...