웹 개발이 복잡해짐에 따라 html, css, js만으로는 한계가 생겼으며, 초기에는 Web 개발을 위한 프론트엔드 라이브러리로 DOM조작을 쉽게해주는 jQuery 라이브러리가 주로 사용되었습니다.
그러나, 이후 DOM을 직접 조작하는 방식에 한계를 느껴 대규모 프로젝트에 효율적으로 코드를 관리하고, 컴포넌트 기반 UI 개발을 지원하는 프론트엔드 프레임워크(Angular,Vue) + 라이브러리(React)가 등장했습니다.
1. Virtual DOM
✔ 가상 DOM은 실제 DOM과 동기화되는 가벼운 복제본으로서, 변경된 부분만을 감지하고 업데이트 합니다.
👉 하드웨어 리소스 소모율(예를 들어 모바일 기기의 CPU 전력 및 배터리)을 크게 절약 + UX 개선
💬 DOM은 문서 객체 모델(Document Object Model)의 약어로, 웹 페이지 문서를 트리 구조의 노드로 표현합니다. JavaScript를 사용하여 이러한 노드를 조작할 수 있습니다. DOM은 웹 페이지의 요소에 동적으로 접근하고 수정하는 데 사용되며, 웹 애플리케이션의 동적인 기능을 구현하는 데 중요한 역할을 합니다.
2. 높은 개발 생산성
✔ ‘컴포넌트’라는 작은 코드 조각을 기본 단위로 UI를 구성.
👉 화면에 구성되는 요소들을 하나하나 개발하지 않고, 반복되는 것들은 컴포넌트를 재사용해 생산성을 높일 수 있죠
3. 단방향 데이터 흐름
✔ 단방향 바인딩은 성능 저하 없이 DOM을 렌더링 시켜주며, 보다 안정적.
✔ 데이터 흐름이 단방향(부모->하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉬움
4. 방대한 생태계와 활발한 커뮤니티 + 일자리
✔ 수많은 개발자들이 사용하며 다양한 라이브러리, 도구, 문서, 강의 등을 제공
👉 문제에 대한 해결책을 찾기 쉬움.
😀 제가 생각하는 가장 큰 장점..
5. 빵빵한 운영 주체 : 메타
✔ 스벨트 울어요 ㅜ
이외에...
크로스 플랫폼 개발? JS 친화적? 고성능?
👓 참고한 문헌
