바닐라 자바스크립트로 DOM 조작하기
만약 사용자와 상호작용 해야 할 일이 더욱 많아진다면?
-
업데이트 하는 항목에 따라 어떤 부분을 찾아서 변경할지 등의 규칙이 많아짐
-
코드를 관리하기도 힘들어질 것임
-
웹 애플리케이션의 규모가 커질수록 DOM을 직접 건드리면서 작업할 때 코드가 난잡해짐
(1) 처리해야 할 이벤트가 다양해지고, (2) 관리해야 할 상태가 다양해지며, (3) DOM도 다양해지기 때문임
⇒ 여기저기서 서로를 참조하게 되고 유지보수하기 어려운 코드가 만들어지기 쉬움
리액트는 이러한 문제를 다음과 같이 해결
-
어떤 상태가 바뀌었을 때 DOM을 어떻게 업데이트 할지 규칙을 정하지 않음
-
다 날려버리고 처음부터 모든 걸 새로 만들어서 보여주면 어떨까? 하는 아이디어에서 시작
- 그러면 업데이트를 어떻게 하면 좋을지에 대해 고민하지 않아도 되기 때문에 개발이 쉬워짐
-
그러나 모든 걸 새롭게 만들게 된다면 속도가 매우 느려질 수도 있었음
-
그래서 Virtual DOM 을 이용해 성능을 지켜가며 이를 가능하게 함
- DOM(Document Object Model): 객체로 문서 구조를 표현하는 트리
