Vue.js 뷰 템플릿 정리 (5)

1. 뷰 템플릿2. 데이터 바인딩 (Data Binding)3. 자바스크립트 표현식4. 디렉티브5. 이벤트 처리 (v-on)6. 고급 템플릿 기법 (computed, watch)6-1 computed 속성6.2 watch 속성6.3 computed 와 watch 속성의 차이

1. 뷰 템플릿

• 뷰 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성

  • 라이브러리 내부적으로, 가상 돔 기반의 render() 함수로변환
  • 변환된 render() 함수는 최종적으로 사용자 화면에 표시
  • 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해짐
  • JSX 기반의 render() 함수에 더 익숙한 리액트 개발자라면 템플릿 속성을 이용하지 않아도 됨

• 뷰 템플릿 사용 방법

  • ES5

    xxxxxxxxxx
    <script>
        new Vue({
            template: '<p>Hello {{ message }}</p>'
        });
    </script>
    

  • ES6

    xxxxxxxxxx
    <!-- ES6: 싱글 파일 컴포넌트 체계 -->
    <template>
        <p>Hello {{ message }}</p>
    </template>
    

     

• 탬플릿 속성 사용 유무 비교 코드

  • 탬플릿 속성을 사용하지 않은 경우

    • h3태그가 먼저 화면에 표시되고, 뷰 인스턴스가 생성되면 message의 값을 Hello Vue.js!로 치환

      xxxxxxxxxx
      <div id="app">
          <h3>{{ message }}</h3>
      </div>
      ...
      <script>
          new Vue({
             el: '#app',
             data: {
               message: 'Hello Vue.js!'    
             }
          });
      </script>
      

  • 탬플릿 속성을 사용한 경우

    • <div id="app"> 태그에 아무런 내용이 없다가 인스턴스가 생성되면 <h3>태그가 화면에 표시

      xxxxxxxxxx
      <div id="app">
      </div>
      ...
      <script>
          new Vue({
             el: '#app',
             data: {
               message: 'Hello Vue.js!'    
             },
             template: '<h3>{{ message }}</h3>'
          });
      </script>
      

 

2. 데이터 바인딩 (Data Binding)

• 데이터 바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미

• 사용 문법

  • {{ message }}

    • 뷰뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는 템플릿 문법

    • data속성의 message 값이 바뀌면 반응성에 의해 화면이 자동으로 갱신 됨

    • 뷰 데이터가 바뀌어도 갱신하고 싶지 않다면 v-once 속성 사용

      xxxxxxxxxx
      <div id="app" v-once>
          {{ message }}
      </div>
      

       

  • v-bind 속성

    • id, class, style 등의 HTML 속성값에 뷰 데이터 값을 연결할 때 사용

    • v-bind:id 문법의 경우, :id로 간소화 가능하지만, 코드 가독성을 위해 간소화 하지 않은 것을 추천

      xxxxxxxxxx
      <style type="text/css">
          #idA{
              color:red;
          }
          .classA{
              color:green;
          }
      </style>
      ...
      <div id="app">
            <p v-bind:id="idA">아이디 바인딩</p>
            <p v-bind:class="classA">클래스 바인딩</p>
            <p v-bind:style="styleA">스타일 바인딩</p>
      </div>
      ...   
      <script>
          new Vue({
              el: '#app',
              data: {
                  idA:'idA',
                  classA:'classA',
                  styleA: 'color:blue'
              }
          });
      </script>
      

      

 

3. 자바스크립트 표현식

• 뷰 템플릿에서 자바스크립트 표현식을 사용할 수 있음

  • {{ number + 1 }} 사칙연산 가능
  • {{ ok ? 'YES' : 'NO' }} 삼항 연산자 사용 가능
  • {{ message.split('').reverse().join('') }} 자바스크립트 API 호출 가능
  • v-bind:id="'list-' + id" 문자열 연산 가능

  xxxxxxxxxx
  <div id="app">
      <p>{{ number + 1 }}</p>
      <p>{{ ok ? 'YES' : 'NO' }}</p>
      <p>{{ message.split('').reverse().join('') }}</p>
      <div v-bind:id="'list-' + id">id값 확인</div>
  </div>
  ...
  <script>
      new Vue({
          el: '#app',
          data: {
              number:10,
              ok:true,
              message: '안녕하세요',
              id:'TEST'
          }
      });
  </script>
  

  

• 자바스크립트 연산식 주의해야할 점

  • {{ var a = 1 }} 변수 선언 불가능

  • {{ if (ok) { return message } }} 조건 식 불가능

  • {{ message.split('').reverse().join('') }} 과 같은 복잡한 연산은 인스턴스에서 수행해야 함

    • computed 속성을 이용하여 연산 (6번 항목에서 설명)

      • caching 기능

    • 화면단 코드는 UI 구조 파악을 위함, 연산 로직과 UI 코드는 분리되는 것이 좋음

 

4. 디렉티브

• v- 접두사를 가지는 모든 속성을 의미

• 디렉티브의 역할은 표현식에 따라서 반응적으로 DOM에 적용

• 화면의 DOM 요소들을 쉽게 조작하기 위해 사용하는 기능

  xxxxxxxxxx
  <p v-if="flag">디렉티브</p>
  

  • 위 <p> 태그는 뷰 인스턴스의 flag 값에 따라서 삽입되거나 제거되어 보일 수도, 보이지 않을 수도 있음

디렉티브	역할
v-if	참, 거짓 여부에 따라 HTML 태그를 화면에 표시하거나 표시 하지 않음
v-for	데이터의 갯수만큼 HTML 태그를 반복적으로 출력
v-show	v-if와 유사, v-if는 실제 태그를 삭제하거나 삽입하지만, v-show는 css 속성을 이용하여 실제 태그는 남아있고 화면상에서만 보이지 않음 (display:none 속성 이용)
v-bind	HTML 태그의 기본 속성과 뷰 데이터 속성을 연결
v-on	화면 요소의 이벤트 감지 및 처리 할 때 사용 ex) v-on:click은 해당 태그의 마우스 클릭 이벤트를 감지하여 특정 메소드를 실행
v-model	폼(form)에서 주로 사용되는 속성 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화 입력된 값을 서버에 보내거나 watch와 같은 속성을 이용하여 추가 로직 수행 <input>, <select>, <textarea> 태그에서 만 사용 가능

 

5. 이벤트 처리 (v-on)

• v-on을 이용한 클릭이벤트 예제

• 기본 클릭 예제

  xxxxxxxxxx
  <div id="app">
        <button v-on:click="clickBtn">클릭</button>
  </div>
  

  xxxxxxxxxx
  new Vue({
      el: '#app',
      methods: {
          clickBtn: function(){
              alert("기본 클릭 이벤트");
          }
      }
  })
  

 

 

• 인자 전달 받기

  xxxxxxxxxx
  <div id="app">
        <button v-on:click="clickBtn(10)">클릭</button>
  </div>
  

  xxxxxxxxxx
  new Vue({
      el: '#app',
      methods: {
          clickBtn: function(num){
              alert("인자 값 전달:"+num);
          }
      }
  })
  

  

 

• event 인자 접근

  • 클릭 이벤트의 경우, event 인자를 통해 클릭 위치 좌표 값을 얻을 수 있음

  xxxxxxxxxx
  <div id="app">
        <button v-on:click="clickBtn">클릭</button>
  </div>
  

  xxxxxxxxxx
  new Vue({
      el: '#app',
      methods: {
          clickBtn: function(event){
              console.log(event);
          }
      }
  })
  

  

 

• 일반 인자, event인자 동시 접근

  xxxxxxxxxx
  <div id="app">
      <button v-on:click="clickBtn($event, 10)">클릭</button>
  </div>
  

  xxxxxxxxxx
  new Vue({
      el: '#app',
      methods: {
          clickBtn: function(event, num){
              console.log("인자 값 전달:"+num);
              console.log(event);
          }
      }
  })
  

  

 

6. 고급 템플릿 기법 (computed, watch)

6-1 computed 속성

• 데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스 내에서 수행

• 최종적으로 HTML에는 데이터만 표현해야 함

• computed 속성을 이용하면 HTML단의 코드가 훨씬 깔끔해짐

• 장점

  • computed속성에서 사용하고 있는 data 값이 변경되면 전체 값을 다시 한번 계산 함

  • 캐싱 (연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러옴, 동일한 연산은 반복하지 않음)

     

• computed 속성과 methods 속성의 차이점

  • methods 속성은 호출할 때만 로직이 수행 (수동)
  • computed 속성은 대상 데이터 값이 변경되면 자동 수행 (능동)

 

• computed 속성 예제

  • 연산된 결과가 reversedMessage 에 저장이 되고, HTML에서 {{ reversedMessage }} 를 호출하면 저장된 값을 바로 불러옴
  • 만약 HTML에서 {{ reversedMessage }} 를 여러 곳에서 호출 한다면 연산을 하지 않고 저장된 값을 가져오기 때문에 성능 면에서 훨씬 효율적
  • 따라서 복잡한 연산을 반복 수행해서 화면에 표시해야 한다면 computed 속성을 이용하는 것이 좋음

  xxxxxxxxxx
  <div id="app">
      <p>원본 메시지: "{{ message }}"</p>
      <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
  </div>
  

  xxxxxxxxxx
  new Vue({
      el: '#app',
      data: {
          message: '안녕하세요'
      },
      computed:{
          reversedMessage: function(){
              return this.message.split('').reverse().join('');
          }
      }
  })
  

  

• Vue 확장프로그램으로 message 값 변경 시, reversedMessage 값이 자동으로 바뀌는 것을 확인할 수 있음

  

 

6.2 watch 속성

• 데이터 변화를 감지하여 자동으로 특정 로직 수행
• computed 속성은 자바스크립트 내장 API를 활용한 간단한 연산 정도에 적합한 반면, watch 속성은 REST API 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합

 

6.3 computed 와 watch 속성의 차이

• watch 속성은, ''데이터가 바뀌면 이런 함수를 실행하라!' 방식의 명령형 프로그래밍

• computed 속성은, 계산이 필요한 목표 데이터를 정의하는 방식의 선언형 프로그래밍

  • 데이터를 정의하되, 원본 데이터가 바뀌면 동기화를 위해 로직 자동 수행

     

• 차이 예제1

  • computed 속성의 경우, 캐싱 기능으로 속성 안에 연산 결과가 저장되는 반면, watch 속성은 그렇지 않음

    xxxxxxxxxx
    ...
    watch:{
      message: function(){
        // 로직만 수행...
          // 결과 값을 따로 저장하진 않음
      }
    }
    

    xxxxxxxxxx
    ...
    computed:{
      reversedMessage: function(){
          //캐싱 기능 활용, 결과 값이 저장됨
          return this.message.split('').reverse().join('');
      }
    }
    

• 차이 예제2

  • watch 속성의 경우, 감지하고 있는 데이터를 직접 변경시키면 무한 루프가 발생 함

  • 실제로 무한 루프가 발생하는 것은 아니고, Vue가 위험성을 감지하고 사전에 Exception 처리

    xxxxxxxxxx
    new Vue({
        el: '#app',
        data: {
            message: '안녕하세요'
        },
        watch:{
            message: function(){
                this.message = this.message.split('').reverse().join('');
            }
        }
    })
    

    

  • 데이터 변화 감지 → watch 실행 → 데이터 변경 → 데이터 변화 감지 → watch 실행 → 데이터 변경 → 데이터 변화 감지 → watch 실행 → 데이터 변경 → 데이터 변화 감지 → watch 실행 → 데이터 변경 ...

  • data 속성안에 있는 데이터를 연산을 하거나 변경을 할 경우에는 computed 속성을 사용해야 함

  • 그래도 watch로 데이터를 변경하고 싶다면, 추가적으로 data를 선언해서 사용

    • message 값의 변화를 감지하여, 로직 수행 후 결과를 reversedMessage 변수에 저장
    • computed와 동작 방식은 거의 동일하겠으나, 사용 목적에 맞지 않음 (watch는 데이터를 정의할 때 사용 하는 것이 아니기 때문)

  xxxxxxxxxx
    <div id="app">
        <input v-model="message">
        <p>{{ reversedMessage }}</p>
    </div>
  

  xxxxxxxxxx
    new Vue({
        el: '#app',
        data: {
            message: '',
            reversedMessage: ''
        },
        watch:{
            message: function(message){
                this.reversedMessage=message.split('').reverse().join('');
            }
        }
    }
  

• 결론

  • 데이터 변화 감지라는 점에 이 둘의 속성은 동일하지만 computed 속성은 데이터를 정의하여 선언적인 방식으로 사용하고, watch 속성은 데이터의 변화를 감지하여 특정 로직을 수행할 때 사용

 

[출처]

1. https://vuejs.org/v2/guide/
2. Vue.js 입문