[Javascript] React와 Vue, Angular의 차이점

회사를 알아보고 있는데 생각보다 Vue를 쓰는 곳들도 많아서

이번에 공부 할 겸  React와 Vue, Angular의 차이점을 적어볼까한다 

 

무언가 표로 정리해보고 싶었는데 표 정리를 좀 어렵구나 ㅎㅎ 

왜 다들 글로 풀어냈는지 알겠다 

그래도 좀 보기 편하게 장표는 그대로두고 장표에 대한 설명을 부가적으로 적어보자!

No	Angular	React	Vue
1	구글에서 지원	페이스북의 지원	Evan You 개인이 유지보수
2	큰 커뮤니티	가장 거대한 커뮤니티	상대적으로 작지만 충분한 커뮤니티
3	양방향 바인딩	단방향 바인딩	양방향/단방향 둘 다 가능
4	x	Virtual Dom	Virtual Dom
5			단일 파일 컴포넌트(Single File Component)
6	프레임워크	라이브러리	프레임워크

중요하지 않은 내용들은 설명 패스! 

 

우선 리액트와 뷰를 비교해보고, 앵귤러를 알아보자!!

[ Vue vs React ]  

1. vue는 프레임워크이며, React는 라이브러리이다

라이브러리는 사용자가 필요할 때에 가져다 썼다 뺐다 할 수 있고 부분적으로 사용이 가능하다~!
하지만 프레임워크는 부분적 사용이 불가능하고 프레임워크 안으로 들어가서 프레임워크가 지원해주는 문법에 따라서 작성해줘야 제대로 동작합니다. 따라서 React 는 자유도가 높으며, Vue 는 한 가지 방식대로 합니다.

2. 컴포넌트 분리 작업 
React는 컴포넌트 분리할 때 한 개의 파일에서 새로운 함수형 컴포넌트를 쉽고 깔끔하게 정의해서 만들 수 있다! 
하지만 뷰에서 새로운 컴포넌트를 분리하려면 일단 새로운 파일을 하나 더 만들어야하고, 그에 따라 하나의 파일에 해당하는 template, script, style 도 작성해야 합니다.
(리액트로만 프로젝트한 나로써는 불편할꺼 같은느낌인데 오히려 코드 가시성 및 생산성이 좋다고 평가하시는 개발자 분들이 많다고 한다! 더 배워보고싶구려..vue란 녀석 )

 

3. 진입장벽 
vue는 러닝커브가 리액트에 비해 낮은 편이라고 한다 .
왜냐하면 vue는 html, css, script 의 싱글파일 컴포넌트 구조이기 때문입니다!  
따라서 jquery 나 js, 개발을 배워보려는 퍼블리셔, 서버개발자들에게 익숙하게 다가올 수 있습니다.
또한 문법이 쉽기 때문에 진입장벽이 낮습니다.

 

 

[ Angular vs React ]  

1.  Angular는 프레임워크이고, React는 라이브러리이다.
• 라이브러리와 프레임워크에 대해서 설명 라이브러리와 프레임워크의 차이는 자유도의 차이 인것 같다.
프레임워크는 짜여진 패턴이나 틀 기반에서 내가 코딩을 하는 것이고, 라이브러리는 내가 가져다 사용해서 자유롭게 사용하는 방식이다.

React는 자체적으로 개발에 필요한 모든 요소들을 제공하지 않으며 제대로 활용하기 위해선 추가적인 구성이 필요하기 때문에 엄격히 말해 프레임워크라고 표현하지 않는다.

2. 바인딩개념
Angular는 양방향 바인딩개념으로 Model과 view가 연결되어있어 데이터 값이 한쪽에서 변화하면 다른쪽에서도 바로 업데이트가 진행된다.
• 장점 : 코드의 사용면에서 코드량을 크게 줄여줌
• 단점 : 변화에 따라 DOM 객체 전체를 렌더링해주거나 데이터를 바꿔주므로, 성능이 감소되는 경우가 있음

react는 단방향 데이터 바인딩이다.
• 장점 : 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신 가능,데이터 흐름이 단방향(부모->하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉬움
• 단점: 변화를 감지하고 화면을 업데이트 하는 코드를 매번 작성해야 함

 

 

 

참고자료

https://medium.com/aha-official/%EC%95%84%ED%95%98-%ED%94%84%EB%A1%A0%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EA%B8%B0-0-angular-react-vue-js-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-%EC%84%A0%ED%83%9D-f797392118d0