원래 리액트를 쓰다가 vue로 작업을 하게 되었다.
vue를 쓰기위해서 공부하다가 배운점을 간략하게 정리 하게 되었다.
vue는 리액트와 비슷한 부분도 있는것 같아서 배우는데 나쁘지 않은 것 같다.
style
css를 입력하는 부분이다.
<style scoped> style에 scoped를 사용하면
자식 상속은 안되고 컴포넌트별 css적용을 할수 있다고 한다.
style 부분은 css 를 사용하던 그대로 사용할수 있으니 무리는 없다.
개개별의 vue 파일에서 style을 지정하고 오직 그 컴포넌트에서의 스타일을 지정해서 사용할수 있다.
import해서도 부모의 컴포넌트 말고 자신의 css를 쓸수 있다.
컴포넌트
vue 에서도 컴포넌트를 나눠서 사용할수 있다.
react에서와 마찬가지로 components 폴더 내에서 .vue 확장자로 사용한다.
APP.vue react의 app.js 와 같은 곳이다.
각 컴포넌트들을 만들고 app.vue에서 <script>에 각 컴포넌트들을 import 한다.
import를 한다음에 export default { components:{'컴포넌트 이름',} 으로 등록하고 templet에서 <컴포넌트 이름> 으로 태그를 사용하여 활용한다.
v-model
input 에서 사용하는 속성이다. input 에 작성된 값을 바로바로 vue인스턴스에 맵핑한다. react에서는 onchange를 사용하여서 값들을 받아왔는데
vue에서는 정해진 접근법이 있어서 더 간단하기도 하다.
<input v-model = "함수"> 로 사용된다.
onchange도 사용할수 있다. v-model은 한글 타이핑시 한박자 느리게 반응하는 단점이 있는데 onchange의 정공법을 사용하면 조금 번거롭기는 하지만 한글 까지 빠르게 반응한다는 장점을 가지고 있다.
vue 컨디마
export default {created : function(){}} 부분에서
created 부분에 입력하면 컨디마 역할을 한다고 한다.
라이프 사이클처럼 크리에이티드 , 마운티드 등등도 뷰에서 사용이 가능하다.
<created, mounted>
컨디마는 리액트의 라이프 사이클로 마운트 될때 실행되는 것이다.
v-bind
html 태그에 동적으로 바인딩 가능하게 한다.
v-bind:class = "{키:불리언값}"
동적으로 상태값, data값들을 바인딩 할수 있게한다.
v-bind는 단축으로 :으로 사용할수 있다.
:class = {데이터 값}.
props
react 에서 자식 컴포넌트에게 함수, state 값들을 내려줄때 props를 활용하였다.
vue에서도 props를 사용 가능하였다.
차이점은 react는 단방향흐름이지만 vue에서는 양방향 인것의 차이가 있는것 같다. vue에서는 양방향이 가능하다는 장점이 있었다.
물론 장점이자 단점도 될수있지만..
장점은 부모에게 자식이 값이 달라졌을 경우 함수를 사용하거나 하는 방식으로 저알 개별로 이벤트를 주기 쉽다는 점이다. 물론 전역 상태 관리를 사용하면 리액트에서도 쉽게 쉽게 부모에게 값을 줄 수 있지만 vue에서는 더 쉽게 반영할수 있었다.
단점은 확실히 자주 사용하다보면 데이터의 흐름을 파악하기 힘들다.
작업을 하면서 컴포넌트가 많았을때 갑자기 모르는 데이터 값이 생겨서 파악하는데 시간이 더 소요 된다는 단점을 가지고 있었다.데이터가 이리저리 자유분방한 느낌이어서 파악하기 쉽지 않았다.
props사용은 아래와 같이 이뤄진다.
v-bind : 내려보낼 프롭스 속성 이름(지정) = 현재위치의 컴포넌트 데이터 속성 으로 사용된다
부모 컴포넌트인 app.vue에서 하위 컴포넌트 속성에 작성한다.
//vue.app
<컴포넌트 v-bind:propsdate='내려보낼값'>
받을 때는 받는쪽의 script의 export default{}에 props:['내려보낼 프롭스 속성이름'] 작성후 사용한다.
위에서 설명 했듯이 단축으로 사용이 가능해서
:프롭스명 = '내려보낼값'으로 단축이 가능하다.
하위 컴포넌트의 함수 위로 올리기
react와는 다르게 vue에서는 하위 컴포넌트 함수를 위로 올릴수 있다.
react도 함수로 어찌 해서 올리는 방법은 있다고 한다.
상위 컴포넌트 에서 v-on 을 활용하여 하위에서 함수가 실행되었을때 v-on 함수로 매칭해서 사용하는 형식으로 사용하는 방법인듯 하다.
예시 상위를 app.vue로 정해서 활용해본다.
//app.vue
<하위 컴포넌트 v-on:하위 컴포넌트에서 발생시킨 이벤트이름 = "현재 컴포넌트의 메소드 명">
//하위 컴포넌트
<script>의 export default의 methods:{this.$emit('하위 컴포넌트에서 발생시킨 이벤트이름',인자1,인자...) 로 활용한다.
하위 컴포넌트에서는 $emit함수를 활용한다. 함수의 인자들도 같이 보낼수 있다.
$emit이 핵심키다.
어찌저찌 해서 복잡하긴 하다.처음에 한번에 이해하기 쉽지않았는데 이를 vuex, 헬퍼를 사용하면 이 기능을 사용하지 않고 간략하게 코드를 작성할수 있다.
차피 vuex의 store.js에 전역으로 함수를 생성하고 그것을 사용하기 때문에 훨씬 간편하다. 하지만 위의 단점에서 말했듯이 vuex든 emit이든 코드를 파악하기 훨씬 어려워진다. 정말 필요할때만 사용하도록 해야할 것이다.
트랜지션
react에서는 애니메이션, 트랜지션 등 css 에서 사용하였는데
vue에서는 트랜지션 속성이 있는 것 같다.
<transition-group name = '' tag = ''> 이런 형식으로 css 에서 활용된다.
name 은 css 에서의 class 같은 것이다.
tag는 지정할 태그를 넣으면 된다. 하고 싶은 태그 p 태그 , div 태그 를 넣을수 있고
지정한 태그에 트랜지션이 적용된다.
기본에서 약간 심화된 내용을 알아보았다. 다음 번 내용으로는 vuex에 대해서 알아보도록 한다.
