6. Vue 를 위한 기반지식

Vue Template

• Vue Template 는 HTML CSS 등 과  기술한 JS  로직들과 연결시켜 사용자가 볼 수 있는 DOM 으로 렌더링하는 속성이다.
• 내부적으로 React 의 Virtual DOM 기반, render() 함수를 호출하여 ( Vue LifeCycle 의 beforeMount ) 화면을 그린다.
• 이때 Vue 의 Reactivity 가 화면에 더해진다.
• doli0413.tistory.com/713?category=951835

2.Vue Instance 와 속성, 라이프 사이클

 

---

 

기본 적으로 알아야할 기반 지식은 다음과 같다.

• Data Binding
• JavaScript Expression
• Directive
• Event Handling

---

DataBinding

 

• Data Binding 은 HTML 의 요소를  Instance 의 데이터와 연결시키는 것을 말한다.
• v-bind , {{}} 기호가 사용된다.
• {{}} : Instance 데이터를 HTML 요소와 연결하는 가장 간단한 방법으로, Vue Instance 가 부착될 때에 data() {} 속성의 값이 {{}} 기호와 연결되어 화면에 데이터를 나타낸다. 이때 Vue Reactivity 에 의해 화면이 자동으로 갱신 된다.
• 만약 Vue Reactivity 없이 데이터 변경이 일어나도 값을 바꾸지 않기 위해서는 v-once 를 사용한다.

<template>
	<!-- 부착 이후 값이 변경되지 않는다. -->
	<div id="app" v-once>
    	{{ immutability }}
    </div>
</template>

• v-bind : HTML 속성 , props 값에 사용되며, 값을 연결시키는 역할을 한다.
• 즉 id, class, style 등의 속성을 연결 시켜 바꿀 수 있다는 의미이다.
• v-bind 로 바인딩 된 속성의 값이 곧 바인딩할 데이터의 Key 가 된다.
• v-bind 속성은 단순하게 {{}} 기호를 바인딩 시키는 것이 아니라 , HTML 속성까지도 동적으로 바꿀 수 있다는 것이다.

<template>
  <div v-bind:id="myId" v-bind:class="Class1" v-bind:style="style1">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      myId : 'ChangeId',
      Class1 : 'ChangeClass',
      style1 : 'background-color:green',
      message : 'This is Vbind'
    };
  }
}
</script>

<style scoped>

</style>

---

JavaScript Expression

• Vue 의 Template 기호에도 JS Expression 을 사용할 수 있다.
• Expression 은 즉 식을 나타낸다.
• Template 기호에 Expression 을 사용할 수 있으나 권장 되지 않는다.

<template>
  <div>
     {{ message.split(" ").reverse().join('|') }}
    <br>
    {{ message + "!!!" }}
    <br>
    {{ message }}
  </div>
</template>

<script>
export default {
  name: "expreesion",
  data() {
    return {
      message : 'Java Script Expression'
    }
  }
}
</script>

<style scoped>

</style>

결과

---

 

주의점

• 제어문이 필요하다면 삼항 연산자를 사용하는 것이 바람직 하다.
• 산술연산은 computed 속성을 사용하는 것이 바람직하다.
• computed 속성은 Cache 기능을 가지고 있기 때문에 속도면에서 이득을 가져다 준다.
• 호출은 메서드 이름만으로 호출한다.

{{ false? message : '' }}

 

 

---

 

Directive

• v- 접두사를 가지는 모든 속성을 의미한다.
• Vue Reactivity 와 연계되어 데이터 변화에 따라 DOM Element 를 다르게 보여줄 수 있다.
  • v-if : 지정한 값에 따라 요소를 보여주거나 보여주지 않는다.  v-show 와 다르게 요소를 삭제시킨다.
  • v-for : 컬렉션을 순회하며 요소를 반복 출력한다. v-bind:key="" 와 함께 identifier 를 정해주면 순회 속도가 상향된다.
  • v-show : 지정한 값에 따라 요소를 보여주거나 숨긴다.
  • v-bind : 태그의 속성과 Vue Instance 의 데이터를 연결한다.
  • v-on : 이벤트를 수신하면 값의 메서드를 호출한다. event , () 로 인자를 받거나 보낼 수도 있다.
  • v-model : Form 에서 사용된다. 입력 값을 Vue Instance 데이터와 즉시 동기화 시킨다. watch 속성과 같이 사용되어 감지시 로직을 수행한다. <input> <select> <textarea> 에서만 쓰일 수 있다.
• watch : 하나의 data() {} 에 대해 변경이 일어났을시 변경 값과 이전 값을 가지고 로직을 진행시킬 수 있다.

// data() {} 의 message 속성에 변화가 일어날 때마다 이전 값과 바꾼 값이 로깅된다.
watch:{
    message:(val, oldVal) => {
      console.log(`${val} || ${oldVal}`)}
  },

<template>
  <div>
	<!-- v-if 는 삭제시킨다. v-show 는 숨긴다. -->
    <h2 v-if="show" v-bind:style="vueStyle" > Vue Directive </h2>
     {{ message }}
    <br>
    {{ reverse }}

    <hr>

    <ul>
    <!-- v-for 는 for-in 문을 통해 요소를 반복 출력한다. -->
      <li v-for="(data,inx) in dataArr" v-bind:key="inx">
        {{inx}} || {{data}}
      </li>
    </ul>

    <hr>
	
    <!-- v-model 은 data() {} 값에 대해 변경이 일어나는 것을 즉시 동기화시킨다. -->
    <input type="text" v-model="message">
    <p>{{message}}</p>

    <hr>
	
    <!-- v-on 은 이벤트 발생시 값의 메서드를 호출한다. -->
    <button v-on:click="emitEvent">click</button>
  </div>
</template>

<script>
export default {
  name: "expreesion",
  data() {
    return {
      //v-model
      message : 'Java Script Expression',
      //v-if , v-show
      show : true,
      //v-for
      dataArr: ['Java','Spring','Redis','Docker','Eureka'],
      //v-bind
      vueStyle : 'font-weight: 500px'
    }
  },
  methods: {
    //v-on
    emitEvent(){
      console.log("event emit")
      this.$emit('event',this.dataArr);
    }
  },
  //watch 로 기존 값과 바뀐 값으로 즉시 로직을 실행할 수 있다.
  watch:{
    message:(val, oldVal) => {
      console.log(`${val} || ${oldVal}`)}
  },
  //computed 는 캐싱기능을 가지며, 데이터 계산에 적합하다.
  computed: {
    reverse(){
      return this.message.split(' ').reverse().join(' | ')
    }
  }
}
</script>

<style scoped>

</style>

---

 

고급 Template 기법

• computed 속성은 데이터 연산 정의 영역이다.
• 바인딩된 데이터에 변화가 일어나면 바뀐 값을 가지고 자동으로 연산을 진행한다.
• computed 속성에 Caching 된 연산결과가 다른 곳에서도 쓰인다면, 캐싱된 값을 바로 표시해준다.

computed 와 methods 의 차이점은 무엇인가.

• methods 속성은 호출 될 때에만 로직을 수행 , computed 속성은 바인딩 된 값이 변할 때 마다 자동으로 호출된다.
• 특정 조건에 의해 데이터가 변해야한다면 methods 속성을, 복잡한 연산을 반복적으로 수행해주어야 한다면 computed 속성을 사용하는것이 바람직하다.

watch 속성에 대해서

• 데이터 변화를 감지하여 자동적으로 로직을 수행시킨다.
• 내장 API 를 통한 연산은 computed , 서버에 데이터를 요청하는 등의 시간이 많이 소모되는 비동기 처리는 watch 속성이 바람직하다.