Vue.js는 UI Framework이며, React처럼 SPA, 컴포넌트 구조를 가진다.
React를 Redux까지 배워보고 나니, 상태관리가 비교적 쉽다는 Vue.js를 배우고 싶어졌다.
공식문서를 보면서 Youtube에서 기초강의를 해본지 2일째인데, 느낀 점은 (React를 먼저 시작해서 일 수도 있지만) 굉장히 쉽고 생산성이 높다.
React로는 많은 보일러 플레이트를 필요로 하는 과정도 굉장히 짧게 이루어진다.
먼저 Vue.js를 시작하기에 앞서, 공식문서가 한글화가 잘 되어있어서 꼭 봤으면 좋겠다.
https://kr.vuejs.org/v2/guide/index.html
Vue.js script로 시작하기
html header부분에 script를 삽입한다.
<!-- 개발버전 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>body부분에 element를 id값 포함시켜서 만든다.
<!-- 예시 vue 인스턴스에서 name이라는 변수를 가져와 렌더링할 것-->
<div id ="app">
{{ name }}
</div>body 끝단에 script를 추가하여 vue인스턴스를 생성한다.
<!-- 예시 vue 인스턴스에서 name이라는 변수를 가져와 렌더링할 것-->
<div id ="app">
{{ name }}
</div>
<script>
new Vue({
el: "#app",
data: {
name : "jjagu"
}
})
</script>이렇게 하면 화면에는 {{name}}대신 jjagu가 보여진다. methods 속성을 추가하여 함수를 만들 경우, 함수도 사용이 가능하다.
여기서 name의 값을 바꿀 경우, 바로 감지하여 브라우저에서도 리렌더링 된다.
그럼 이제 name의 값을 바꾸는 법을 알아봐야겠다.
Data binding
단순히 vue 인스턴스의 변수를 보여주는 것이 아닌 사용하려면 v-bind를 이용해야 한다.
React를 사용해봤다면 useState로 생성한 state를 input에 value로 넣은 것과 같은 과정이다. 그렇지만 vue는 onChange라는 이벤트를 사용하지 않아도 state가 바로 변경이 된다는 큰 장점이 있다.
<!-- body부분: input의 값을 사용해서 state를 변경하고 바로 보여주기-->
<div id="app">
<input type="text" v-model:"name" />
{{ name }}
</div>
<script>
new Vue({
el: "#app",
data: {
name: "jjagu"
}
})event를 추가 안했는데도, input창에 떠있던 jjagu의 이름을 바꾸면 밑의 name의 값도 바로 바뀌는 것을 확인할 수 있다.
만약 이렇게 양방향 바인딩이 아닌 속성에서 가져다쓰는거면 속성앞에 :만 붙이면 된다.(:는 v-bind: 의 줄임말)
이외에도 vue에는 v-if, v-show, v-for, @event처럼 편리한 기능이 너무 많다.
공식문서를 보면서 꼭 해보길!!
React에 빠질 때는 복잡한 걸 해결해가면서 재미를 느꼈는데,
Vue는 이렇게 효율적으로도 구현할 수 있구나 흠뻑 빠졌다.
다음 프로젝트는 Vue.js로 구현해봐야겠다.
