리액트가 아무리 인기많고 강세라지만 최근 뷰를 찾는 회사가 많다!
그래서 대략이라도 알면 좋지 않을까? 라는 마음에 짧은 공부해보기
네이버뮤직에서도 뷰를 이용했었고 카카오에서도 뷰를 사용하는 경우가 많은데
리액트와 다른 장점과 단점은 무엇일까..?
Vue의 장점
- 낮은 러닝커브
spa 프레임워크 중에 제일 배우기가 쉽다.
동일 기능을 만든다하면 리액트나 앵귤러처럼 만들수 있지만
보다 쉬운 방법으로 만들수 있다.
앵귤러는 어려운 문법에 타입스크립트가 필수적으로 사용되어야하고
리액트는 Js문법을 많이 활용하여야한다
하지만 vue는 vue만의 문법으로 만들수 있기에 js에 약하지만 공부량이 적어도 개발 가능한 vue가 좋은 평가를 받는 것이다.
If문만 보면 리액트는 js 의 if문을 그대로 사용하지만 시맨틱 태그에 몇가지 조작만 하여 조건을 걸수 있고
state도 return에 선언만 하여도 값을 가져올수 있다.
-
정답이 정해져있다
리액트에서는 정해진 방법이 없이 내가 어떻게 만드느냐에 따라 많은 것이 바뀌는데
vue는 코드의 방식이 제한적으로 어느정도 답이 정해져있어서 레퍼런스 코드를 찾아보기가 편하다.
그렇다고해서 아주 규격화된것은 아니고 어느정도 유동성있는 코딩도 가능하다 -
속도가 빠르다
렌딩을 비교해보았을때 리액트가 사실 상대적으로 더 느린 자료를 본적이 있는데 못찾...아무튼
실제로 그렇다고하나 엄청나게 미묘한 차이겠지만 그래도 더 빠른 렌더링이 가능하다는 것은 특정 사이트에는 큰 장점이 될수 있다
css..?
app에서 퍼블리싱을 하게 될경우
이렇게 #app에 css가설정이 되어있음
그리고 html에서와 동일하게 css는 style태그 내부에 넣어서
선택자를 통하여 클래스에 넣을 스타일 생성이 가능하다
데이터 바인딩
진짜 생초짜의 태그..
<template>
~~~ html태그를 넣기~~~
</template>이렇게 template 이라는 태그에다가 html을 그리는데
바닐라Js나 리액트처럼 태그에 클래스나 스타일을 넣을수도 있다.
하지만 데이터바인딩에서 조금 차이가 나는데 {{}} 이렇게 괄호를 두번 사용하여
안에 스테이트를 불러온다는 것이다.
디폴트에다가 data 보관함을 만들어서 그에 리턴값에다가 선언하는 것인데
조금 복잡해보이긴하지만 데이터를 읽기에는 편한 것 같이 느껴진다.
다만 데이터값이 커지고 다른 데이터를 가져오고 할때 컴포넌트를 나누는 것을 어떻게 해야할지 궁금하긴한데 언젠간 알게되겄지 뭐...
리액트처럼 그 내부에서 상태들을 나누고 더하는 것도 가능하다
제일 신기한 것은 스타일속성을 주려고 하면 style 앞에 꼭 :을 붙여야한다
반복문 v-for
<div class="menu">
<a v-for="aaa in Mymenu" :key="aaa">{{aaa}}</a>
</div>
...
data(){
return {
Mymenu :[ "1번메뉴","2번메뉴","3번메뉴"]
}}이렇게 a태그에 v-for 를 넣는것만으로도 반복문이 생성 되는데
배열과 객체를 넣는 것이 가능한 장점이 있는데
key를 필수적으로 필요한데 js의 map에서처럼 Key를 부여하여 반복할수 있도록함.
아직까진 쉬운데...곧 안쉬워 지겠지...
