프론트엔드 개발을 더 쉽게 만들어주는 library이다.

리액트가 해결하려는 문제

• 컴포넌트별로 구분하여 유지보수를 용이하게 함
• Virtual-DOM을 사용하여 사용자의 액션에 따른 수정사항들을 적은 비용으로 적용

Virtual DOM 을 사용하는 이유

Virtual DOM 이란?

→ 실제 DOM의 구조와 비슷한 React 객체의 트리

→ 개발자가 Virtual DOM을 제어하면 React에서 적절한 과정을 통해 Virtual DOM을 DOM에 반영한다.

장점

• DOM을 직접 조작하지 않아도 된다
• 수개의 DOM을 직접 관리, 조작하는 과정은 복잡하고 실수할 가능성, 연산비용 등 고려할 게 많은데 Virtual DOM이 이러한 과정들을 자동화, 추상화 해준다
• DOM 의 update를 batch 작업(실시간 처리가 아닌, 일괄적으로 모아서 처리하는 작업)을 통해 연산을 최소화, 연산을 묶어서 한 번에 처리

Real DOM의 경우에는 업데이트 할 때마다 수정되는 DOM과 관련있는 모든 자식 노드, 부모 노드를 업데이트를 해야한다. 반복해서 업데이트하거나 DOM트리가 클 경우 성능에 나쁜 영향을 끼친다. React는 Virtual DOM을 사용하여 트리의 변경되는 부분만 업데이트하는 방식(diffing algorithm)으로 DOM을 업데이트 하기 때문에 성능면에서 우월하다.