React, Angular, Vue의 차이

애플리케이션을 개발할 때 빠른 생산성과 효율을 위해 사용하는 것이 프레임워크, 라이브러리이다.

둘의 차이는 제어흐름에 있다.

개발자가 전체적인 애플리케이션 틀의 주도권(제어흐름)을 가지고 필요할 때 사용하는 도구는 라이브러리이다. 

반면 전체적인 틀이 정해져 있으며, 개발자는 그 틀 안에서 필요한 코드를 작성해 완성시키는 것은 프레임워크이다. 

프레임워크는 사용해야 할 코드가 정해져 있고, 사용 목적이 명확하다.

(프레임워크는 밀키트 카레 vs 라이브러리는 손질양파, 다진 마늘, 앞다리살 카레용 )

 

Angular는 정리된 폴더 구조, 쉬운 개발환경 구성(Angular CLI), 다양한 모듈 지원 등 애플리케이션 개발에 필요한 모든 기능이 내장된 강력한 프레임워크이다. 기존 AngularJS에서 2016년 타입스크립트 기반의 Angular로 전환되었다.

타입스크립트 기반으로 객체지향 프로그래밍에 적합해 큰 규모의 개발에 효과적이다. 

자바스크립트, HTML, CSS파일을 한 컴포넌트 안에 포함한 컴포넌트 기반의 개발을 중심으로 한다.

 

React는 자바스크립트의 라이브러리로 Angular와 달리 개발에 필요한 모듈을 다른 라이브러리에 의존한다. 사용자는 자유롭게 필요한 라이브러리를 사용할 수 있는 반면 틀이 정해져 있지 않기 때문에 개발에 필요한 툴을 직접 구성해야 한다. 

대신 개발 환경을 구축하기 위한 Creacte React App 툴을 제공해 진입장벽을 낮춘다.

Angular와 마찬가지로 컴포넌트 기반의 개발이지만 더 자바스크립트에 집중된 형태의 컴포넌트를 사용한다.

( HTML 마크업 기반으로 그 위에 템플릿 문법을 추가해 컴포넌트의 구조와 구성요소를 정의하는 반면, React는 XML 포맷의 템플릿을 직접 자바스크립트에 내장시키는 형태로 JSX 기술을 주력으로 사용하는 것을 권장)

리액트의 또 다른 특징은 가상돔을 사용해 변경된 실제 돔에서 변경된 특정요소만 업데이트 함으로써 렌더링 성능을 향상시킨다. Angular에서는 변경감지 구현 기능을 사용해 이 부분을 보완한다. 

 

Vue는 앵귤러와 리액트의 중간 지점에 있는 프레임워크이다. 프레임워크이지만 Angular와 다르게 커뮤니티가 중심이 되어 개발되고 발전하기 때문에 진입장벽이 낮고, 예제 중심의 공식문서가 있어 접근성이 좋다.

리액트와 마찬가지로 가상돔을 사용하며, 컴포넌트 기반의 개발이 이루어지지만, 컴포넌트의 구성은 HTML 마크업을 기반으로 해 Angular와 유사하다. 

 

프로젝트의 규모가 크고 타입스크립트를 좋아한다면 Angular,

거대한 생태계와 유연성을 원한다면 React,

쉽고 가벼운 프레임워크를 원한다면 Vue.js

 

---

프레임워크와 라이브러리: 

https://webclub.tistory.com/458

프레임워크와 라이브러리의 차이점

React, Angular, Vue 비교: 

https://www.samsungsds.com/kr/insights/frameworks.html

웹 프론트엔드 프레임워크, 무엇을 쓸까?

정적타입v동적타입:

https://devuna.tistory.com/82

정적타입 언어 vs. 동적타입 언어 특징 비교하기

컴파일과 런타임:

https://velog.io/@yejin20/%EB%9F%B0%ED%83%80%EC%9E%84%EA%B3%BC-%EC%BB%B4%ED%8C%8C%EC%9D%BC%ED%83%80%EC%9E%84-%EC%B0%A8%EC%9D%B4%EC%A0%90

[TIL]런타임에러와 컴파일타임에러

객체지향과 절차지향: 

https://st-lab.tistory.com/151

객체지향(OOP)과 절차적 프로그래밍(PP)