Vue.js 와 React.js 차이

😍 Vue.js 와 React.js 는 어떤 차이가 있을까?

• 일단 이 주제를 다루기 전에 library 와 framework 에 대한 이야기부터 해보자😅

library

• 애플리케이션 개발 시, 필요한 기능 또는 재사용이 필요한 기능을 묶어놓은 코드집합
• 외부로 노출된 함수들을 통해 호출하여 사용
  

framework

• 뼈대 및 기반구조를 의미하는데, 애플리케이션 개발 시 필요한 기능(DB 연동, 객체 생성 등)을 어느정도 제공해주기 때문에 프레임워크가 제공하는 환경에서 기능개발만 집중하면 된다.

library vs framework

• 이 둘의 차이는 간단하다. IoC(Inversion Of Control) : 제어의 역전이 누구에게 있냐이다.(제어의 흐름, 누가 핸들링을 하는 주체인가) 스프링 프레임워크를 예시로 든다면 스프링에서는 Bean을 등록해주면 컨테이너(IoC Container)에서 해당 Bean 객체의 생애주기를 관리해주고 주입까지 자동으로 해준다.(그리고 프레임워크는 자기자신만의 생애주기를 가지고 있습니다. -> 이 흐름은 개발자가 마음대로 변경하거나 할 수는 없습니다.)
• 좀 더 쉽게 이야기하면, 개발자가 직접 코드로 작성해서 여러가지 할 일을 자동으로 해주느냐 아니면 직접하느냐에 차이입니다.

Vue.js vs React.js

• Vue.js is The Progressive JavaScript Framework
• React.js is A JavaScript library for building user interfaces

  vue.js 는 framework 라고 소개가 되어있으며, react.js 는 library 라고 소개가 되어있습니다. 그런데 막상 vue.js, react.js 를 다 해보면 둘다 같은사상에서 컴포넌트 기반으로 개발하게끔 되어있습니다.(둘다 가상DOM 기반으로 diff 하여 반영 및 컴포넌트 트리 구조 등)
  저의 개인적인 생각으로는 vue 또는 react 도 프레임워크 레벨로 봐도 무방하다 입니다.(어차피 개발을 하려면 vue, react 에서 제공하는 방식으로 강제가 되기 때문입니다.)
  일부에서는 react.js 같은 경우 model, view를 어떻게 관리할것인지에 대한 제어권이 개발자에 있으므로 라이브러리에 가깝다고도 한다.(redux 를 쓸건가? mobx 를 쓸건가? 등 자유롭게 라이브러리를 구성해서 할 수 있으나 이는 라이브러리 의존성이 생길수도 있다)

😡 그럼 차이가 없을까요?

• API 표현성
• 성능
• 학습의 용이성
• 커뮤니티 크기 및 지원
• 다양한 도구와 라이브러리들이 존재하는가(상태관리, 라우팅 등)
• CLI(개발환경에 쉽게 접근이 가능한가 또는 준비가 가능한가)
• 향후 해당기술에 대한 개발 및 업데이트를 보장하는 커뮤니티 지원 및 기업 지원

결론

• react.js 와 vue.js 둘다 훌륭한 기술이며, 프레임워크로 봐도 된다고 생각한다.
• 개인적으로 vue.js 가 react.js 보다 학습비용이 덜 든다.
• react.js 는 페이스북이 이끌고 있고, vue.js 는 에번유가 후원을 받으면서 진행이 되고 있다.(커뮤니티도 react.js 가 훨씬 더 크다)
• react.js 에서는 JSX(React.createElement()) 이용하여 마크업을 작성하지만, vue.js 에서는 컴포넌트내에 <template> 태그에서 마크업을 작성하도록 되어있다.(접근방식, 구조 차이) -> 물론, vue 에서도 render() 함수를 이용하여 마크업을 작성이 가능하긴 하다.

잘못된 내용이 있다면 언제든 댓글로 내용 남겨주시면 감사하겠습니다! 읽어주셔서, 감사합니다.