VUE의 기초

이명진·2021년 8월 14일
0

Vue 배우기

목록 보기
1/6

vue? vue!😎

vue를 입문 하게 되었다. 원래는 react를 사용했었는데 어쩌다보니 vue를 사용하게 되었다. react도 금방 익혔는데 vue도 금방 익힐것 같다. 간단히 알았을때 러닝 커브가 낮다고 했었는데 react를 먼저 배우고 vue를 배우다 보니 이해가 훨씬 쉽다는 느낌을 받을수 있었다.
카카오,네이버 에서도 vue를 사용한다고 했었는데 요즘은 잘 모르겠다. 요즘은 react를 많이 사용하는 것 같기도 하고 vue를 사용하다가 react를 잊지 않을까 걱정되기도 하지만 개발자는 변화에 빠르게 적응해야 하는 자세가 필수이다보니 이런 자세에도 빠르게 적응하기 위해서 vue를 배우는것도 좋은 기회가 될수 있을거 같다.
한편으로 react도 배울게 더 많긴해서 아쉽기는 하지만 새로운 것에 도전해보기로 하였다. vue에 대해서 간단하게 알고있었는데 공부를 하면서 vue에 대해 알게 되었고 정리를 하게 되었다.

기초에 대해서 유튜브 강의를 보면서 정리를 하게 되었다.

Vue🧑🏼‍💻

구조는 template , script , style 로 나뉘어 진다.
template에서는 html을 입력하는 공간이다 각 태그들을 사용한다.
script는 js, 자바스크립트 , 함수 등을 입력하는 공간이다.
style은 css를 입력하는 공간이다.

데이터바인딩

react의 state값처럼 데이터를 바인딩해서 변수처럼 사용할수 있다.

<script> 안에 
  export default { name : 'APP', data(){
return{} }

data()의 return{} 안에 데이터를 보관한다.
object 형식으로 키와 키값으로 데이터를 저장한다.

예)

export default { name : 'APP', data(){
return{ elm : '요소' } }

사용은 template 코드 안에서 {{키이름}} 으로 사용된다.

<div> {{elm}} </div>

이런 형식이다. {} 괄호를 두번 사용해야 한다.

참고로 html 속성에도 사용이 가능하다. 하지만 사용 방법이 다르다.

HTML속성에서 사용

괄호 대신에 콜론(:)을 사용한다.

<div :style="elm"> 

이런 식으로 사용된다.
콜론을 사용하는 이유는 v-bind 라는 속성을 쓰는 것이다.
v-bind 는 : 으로 축약할수 있다.

속성에서는 {{}} 이런 형식으로 데이터 바인딩을 하는 것이 아니고 v-bind로 데이터를 바인딩 하는 것이다. 축약으로 : 으로 사용한다.

왜 사용하는가 ?
react의 state 값과 비슷하게 활용된다. 값이 변경될때마다 자동으로 렌더링이 된다.
그리고 코드를 깔끔하게 사용할수 있다.

반복문

vue에서의 반복문은 훨씬 깔끔하다. react에서는 for , for-each, map 등등을 활용하여 반복문을 작성하였다. vue에서는 한가지 방법 v-for를 활용한다.

<태그 v-for=""> 이런 형식으로 사용된다.
리액트에서는 map을 사용하였는데 활용법도 비슷한다.
<태그 v-for="(data,index) in 몇회 " :key="index"> {{data}} </태그>
map 처럼 인자가 두개를 설정할수 있다. index는 확실히 옵션이다.
:key도 활용해야지 오류가 발생하지 않는다.
몇회 부분에는 숫자는 물론 array,object 를 넣을수 있다. 만일 넣게 되면
데이터 개수만큼 반복을 진행한다.

태그도 반복하고 싶다면 태그 안에 넣으면 태그도 반복이 된다.

<태그 v-for="(data,index) in 몇회 " :key="index">
<p></p></태그>

p태그, div 등등 태그를 넣으면 안에 넣은 태그들이 반복된다.

이벤트 핸들러

react 에서는 onclick 등등으로 html 속성으로 작성하였다.
vue에서는 v-on:click ="함수명" 이렇게 활용된다.
간단하게도 @click 이렇게 사용되기도 한다.
v-on:keyup.enter = " " 이렇게 사용하면 엔터키를 눌렀을때의 조건으로 사용할수 있다.

함수 만들기

react 에서는 클래스형에서는 랜더함수 위에, 함수형에서는 리턴 위에 함수를 작성하였는데 vue에서는 script에서 함수를 작성한다.

script 아무데서나 작성하지는 않고
methods : {} 안에 함수를 만들어서 사용하게 된다.
그리고 클래스형 리액트와 마찬가지로 데이터(state)에 접근할때 this를 활용한다.

예시를 보면 아래와 같다.

 
<script>
export default { name : 'APP', data(){
return{ elm : '요소' } },
methods:{함수 보관 }

vue에서는 script에서 다 연산 처리를 하고 html을 입력하는 template 코드에는
간단하게 작성하는 것을 권고한다고 한다.
script는 지저분하게 template 에서는 간결하게

각각의 컴포넌트 별로 함수를 만들고 작성하지만 react처럼 나중에 vue도 vuex,헬퍼를 알게 되면 더 깔끔하게 작성할수 있다.
react의 전역상태 관리인 리덕스와 같다고 생각한다. 리덕스도 사용해봤는데 vue의 vuex,헬퍼가 훨씬 더 쉽다. 이에 관해서는 나중에 정리하도록 한다.

조건식

react에서는 태그에 if 조건을 넣을수 없는 것으로 알고 있다. 대신에 조건부 랜더링 을 활용하는데 vue에서는 태그 속성으로 조건식을 넣을수 있다.
v-if="조건식" 이렇게 넣고 부모 태그 속성에 넣으면 자식태그들 까지도 조건을 가지고 때에 따라서 조건부 랜더링 처럼 활용할수 있다.

모듈

import es6부터 등장하게된 모듈 react에서 많이 활용하다보니 쉽게 적응할수 있었다. react에서는 맨위에 import를 사용했었는데 vue에서는 script 안에서 작성한다. vuex, 헬퍼를 사용할때 많이 활용되는 것 같다.

이렇게 간단하게 vue에 대해서 알아보게 되었다. 기초에 대한 사안으로 이정도만 알고도 쉽게 vue를 사용할수 있을것이다. 하지만 코드를 간결하게 작성하기 위해서는 vuex,헬퍼 에 대해서 알아두면 더 중급스럽게 vue를 사용할수 있을것이다.
차차 vuex,헬퍼에 대해 공부한 내용도 정리해보겠다.

profile
프론트엔드 개발자 초보에서 고수까지!

0개의 댓글