Vue.js 특징

tjdud0123·2020년 6월 28일
1
post-thumbnail

저번 포스팅에서 언급했던것 같이 vue는 react와 마찬가지로 프레임워크이자 라이브러리다.

MVVM패턴의 뷰 모델에 해당하는 화면단 라이브러리인데, MVVM패턴이 무엇인지부터 살펴보자.

MVVM 패턴

마크업언어나 GUI 코드를 백엔드 로직과 분리하여 개발하는 패턴

뷰 - 뷰모델 - 모델로 구조화하여 개발하는 방식으로 유지보수에 용이하다.

뷰(View) : 사용자에게 보이는 화면
뷰모델(ViewModel) : 뷰와 모델의 중간영역으로 돔리스너와 데이터 바인딩 제공
모델(Model) : 데이터 담는 곳. 보통 JSON 형태로 저장

** 돔리스너 : 돔 변경내역에 대해 즉각적 반응하여 특정 로직 수행

뷰는 화면의 요소가 변경될때 즉각적으로 반응하여 데이터를 보여주는 역할을 수행한다.

돔요소 변경 -> _돔리스너 감지_ -> 모델접근 -> _데이터 바인딩_ -> 뷰에 출력

다른 프레임워크의 장점 결합

Angular의 양방향 데이터 바인딩 -> 출력값과 모델값이 동기화
React의 가상돔 -> 필요한 부분만 빠르게 렌더링
React의 단방향 데이터 흐름 -> 모델컴포넌트에서 UI컴포넌트로 데이터가 흘러 이해와 관리가 쉬움

Angular -> React -> Vue 순서로 출시되었으며 어떤 것을 배우고 사용해야 하는지는 의견들이 분분한것 같다

캡틴 판교님의 블로그에 "React인가 Vue인가"에 관한 글이 잘 정리되어있어 참고하면 좋을 것 같다
https://joshua1988.github.io/web_dev/vue-or-react/

문법이 간편하고 작성하기 쉽다

개인적인 의견이지만 리액트는 JSX문법을 사용하는데 뷰는 html태그와 함께 사용가능해서 작성할때 덜 번거로웠고 쉬웠으며
뷰파일 하나에 html, css, js, 데이터등을 한눈에 보기 편했다.
또, 자바스크립트 라이브러리 3대장중에 속도는 최고라고 한다.

하지만 아직 생태계는 리액트가 훨씬 크고 사용하는 곳도 많으며 요즘 여러가지 Hook들도 많이 나오고 있다. 결론적으로 아직까지는 뷰가 사용하는 곳이나 자료, 레퍼런스 등은 리액트보다는 부족하지 않나 싶지만 최근에는 레퍼런스도 많아지고 있고 빠른렌더링과 개발속도는 큰 장점이라고 생각한다.

컴포넌트(Component) 기반 프레임워크

기본적인 지식이고 다른 프레임워크들도 컴포넌트 기반이지만, 핵심이라고 생각해서 적어두었다.
컴포넌트는 간단히 말하면 UI조각, 레고블록 같은 개념으로
컴포넌트기반으로 개발하면 코드를 재사용하기 쉽고 유지, 보수가 용이하고 이해하기 쉽다.

profile
Junior Web FE Developer

0개의 댓글