[Vue CLI] template | 데이터 마이닝, 디렉티브, 속성(computed, methods, watch)

Vue의 template은 html, css 드으이 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html로 변환해 주는 속성이다.

 

template 속성 및 문법

데이터 바인딩

데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다.

1. 텍스트 보간법 - {{ }}

<template>

  <span>{{ msg }}</span>

</template>

<script>

export default {

  data() {

    return {

      msg: 'Hello Vue'

    }

  }

}

</script>

이중 중괄호 태그 내 msg 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체된다.

2. HTML 출력 - v-html

이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석된다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다. 디렉티브는 Vue에서 제공하는 특수한 속성임을 나타내기 위해 접두가 v- 를 사용한다.

<template>

  <p>텍스트 보간법 사용: {{rawHtml}}</p>

  <p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

</template>

<script>

export default {

  data() {

    return {

      rawHtml: '<span style="color: red">이것은 빨간색이어야 합니다.</span>'

    }

  }

}

</script>

단 웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점이 쉽게 발생할 수 있으므로 위험할 수 있다.

 

3. 속성 바인딩 - v-bind

이중 중괄호는 아이디, 클래스, 스타일 등 html 속성 값에 데이터를 연결할 수 없다. v-bind 디렉티브를 사용하여 html 속성에 데이터를 바인딩할 수 있다.

<template>

  <div v-bind:id="dynamicId">Hello Vue</div>

</template>

<script>

export default {

  data() {

    return {

      dynamicId: 'red'

    }

  }

}

</script>

<style>

#red {

  color: red;

}

</style>

v-bind:id는 해당 값을 해당 요소의 id로 설정한다.

단축 문법

v-bind는 : 로 간소화할 수 있다.

<div :id="dynamicId">Hello Vue</div>

 

동일 이름 축약

속성의 이름이 바인딩 되는 js 값과 같은 경우 속성 값을 생략할 수 있다. (Vue 3.4 이상에서만 사용 가능)

아래 코드는 v-bind:id="id"와 같다.

<div :id></div>

<div v-bind:id></div>

 

여러 속성을 동적으로 바인딩

여러 속성을 나타내는 js 객체가 있는 경우 인자 없이 v-bind를 사용하여 단일 엘리먼트에 바인딩할 수 있다.

<template>

  <div v-bind="ObjectOfAttrs"></div>

</template>

<script>

export default {

  data() {

    return {

      ObjectOfAttrs: {

        id: 'container',

        class: 'border'

      }

    }

  }

}

</script>

<style>

#container {

  width: 100px;

  height: 50px;

  background-color: lightgray;

}

.border {

  border: 2px solid black;

}

</style>

 

JavaScript 표현식 사용

{{ }} 안에 js 표현식을 넣을 수 있다.

<template>

  <p>{{ num + 5 }}</p>

  <p>{{ msg + "!!!" }}</p>

  <p>{{ msg.split("").reverse().join("") }}</p>

</template>

<script>

export default {

  data() {

    return {

      num: 5,

      msg: "Hello Vue",

    };

  },

};

</script>

 

js 표현식을 사용할 때 주의해야할 점이 있다. 

js의 선언문과 분기 구문은 사용할 수 없으며, 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 한다는 것이다. html에 최종적으로 표현될 값만 나타내고 데이터의 연산은 js 단에서 함으로써 코드의 가독성을 높일 수 있기 때문이다.

아래처럼 텍스트 값을 역순으로 변환하는 연산은 js 단에서 computed 속성을 사용하여 계산한 후 최종 결과 값만 표시할 수 있다. computed 속성은 데이터 연산들을 정의하는 영역이다.

<template>

  <p>{{ msg.split("").reverse().join("") }}</p>

  <p>{{ reserve_msg }}</p>

</template>

<script>

export default {

  data() {

    return {

      msg: "Hello Vue",

    };

  },

  computed: {

    reserve_msg() {

      return this.msg.split("").reverse().join("");

    },

  },

};

</script>

 

디렉티브

뷰 디렉티브란 html 태그 안에 v- 접두가를 가진 모든 속성을 의미한다. 디렉티브의 역할은 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 변경된 데이터 값에 따라 업데이트를 적용하는 것이다.

 

주요 디렉티브

• v-if: 지정한 뷰 데이터 값의 참 거짓 여부에 따라 해당 html 태그를 화면에 표시하거나 표시하지 않는다.
• v-for: 지정한 뷰 데이터의 개수만큼 해당 html 태그를 반복 출력한다.
• v-show: v-if와 유사하게 데이터 진위 여부에 따라 화면에 표시하거나 표시하지 않는다. 다만 v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 display:none;으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않는다.
• v-bind: html 태그의 기본 속성과 뷰 데이터 속성을 연결한다.
• v-on: 화면 요소의 이벤트를 감지하여 처리한다. 예를 들어 v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다.
• v-model: 폼(form)에서 주로 사용된다. 폼에서 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 지정하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. input, select, textarea 태그에만 사용할 수 있다.

<template>

  <a v-if="flag">Hello Vue</a>

  <ul>

    <li v-for="system in systems">{{ system }}</li>

  </ul>

  <p v-show="flag">Hello Vue</p>

  <h5 v-bind:id="uid">vue practice</h5>

  <button v-on:click="popupAlert">경고 창 버튼</button>

</template>

<script>

export default {

  data() {

    return {

      flag: true,

      systems: ["android", "ios", "window"],

      uid: 10,

    };

  },

  method: {

    popupAlert() {

      return alert("경고 창 표시");

    },

  },

};

</script>

 

methods 속성

computed 속성은 대상 데이터 값이 변경되면 자동적으로 수행되는 반면 method 속성은 호출할 때만 해당 로직이 수행된다.

<template>

  <p>{{ msg }}</p>

  <button v-on:click="reserve_msg">문자열 역순</button>

</template>

<script>

export default {

  data() {

    return {

      msg: "Hello Vue",

    };

  },

  methods: {

    reserve_msg() {

      this.msg = this.msg.split("").reverse().join("");

    },

  },

};

</script>

 

methods 속성은 수행할 때마다 연산을 하기 때문에 별도로 캐싱하지 않지만 computed 속성은 데이터가 변경되지 않는 한 이전의 계산 값을 가지고 있다가(캐싱하고 있다가) 필요할 때 바로 반환해준다. 따라서 복잡한 연산을 반복 수행해서 화면에 나타내야 한다면 computed 속성을 이용하는 것이 methods 속성을 이용하는 것보다 성능 면에서 효율적이다.

 

watch 속성

watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다. computed 속성과 유사하지만 computed 속성은 내장 API를 활용한 간단한 연산 정도에 적합한 반면, watch 속성은 데이터 호출과 같이 시간이 더 오래 걸리는 비동기 처리에 적합하다.