기록하는 곳

4. 뷰 템플릿 & 속성

뷰 템플릿

우리가 뷰로 작성한 문서를 브라우저에서 볼 수 있는 형태의 html로 변환해주는 속성이다.

사용하는 방법은 두 가지인데,

  1. 뷰 인스턴스의 template 속성을 활용
  2. data 속성을 통해 요소에 데이터를 바인딩

1번 방법은 우리가 예제를 진행해오면서 사용한 방법이다.
'template'이라는 속성에 html태그와 데이터를 담아 함께 렌더링하여 사용했었다.

2번 방법은 html태그는 미리 작성해두고 뷰 인스턴스에서 작성한 데이터를 바인딩해주는것이다.

데이터 바인딩

데이터 바인딩의 주요 문법은 두 가지가 있다.

  • (콧수염 괄호)
  • v-bind 속성

  1. 뷰 인스턴스의 데이터를 html 태그에 연결하는 가장 기본적인 텍스트 삽입 방식이다.
    (es6의 백틱(`)을 생각하면 될 듯 하다.)
    만약 데이터가 변경되어도 값을 바꾸고 싶지 않다면 해당 데이터가 들어가는 html태그에 v-once 속성을 넣어주면 된다.
    <div id="app" v-once> {{ message }} </div>

  1. v-bind
    html 속성 값에 뷰 데이터 값을 연결할 때 사용한다.
    <p v-bind:id="idA">아이디 바인딩</p>

    아래와 같이 v-bind를 생략하여 사용할 수도 있다.
```<p :id="idA">아이디 바인딩</p>```

자바스크립트 표현식

콧수염 괄호 안에서 자바스크립트 표현식이 사용 가능하다.

하지만 선언문, 분기문은 사용이 불가능하고
복잡한 연산은 computed 속성을 이용하는 것이 바람직하다.


디렉티브

HTML 태그 안에 v-접두사를 가지는 모든 속성들을 의미한다.

명칭역할
v-if조건이 참일 때 해당 HTML태그를 렌더링한다.
v-show조건이 거짓일 때 해당 태그에 'display:none'을 적용시킨다.
v-for작성해준 조건만큼 HTML태그를 반복 출력한다.
v-bindHTML 태그의 기본 속성과 뷰 데이터 속성을 연결해준다.
v-on화면 요소의 이벤트를 처리할 때 사용한다.
v-model주로 form에 입력된 값을 뷰 데이터와 동기화할 때 사용한다.
watch와 같은 속성을 이용하여 추가 로직을 수행할 수 있다.
(input, select, textarea에만 사용 가능)

이벤트 처리

뷰에서는 이벤트를 처리하기 위해 v-on과 methods 속성을 활용한다.
아래는 버튼 클릭 이벤트 처리 코드이다.

...
<button v-on:click="clickBtn">클릭</button>
...
<script>
  methods: {
    clickBtn: () => {
      alert('clicked');
    };
  }
</script>

데이터를 전달하거나, 이벤트가 일어난 DOM에 접근할 수도 있다.

  • 데이터만 전달할 경우
...
<button v-on:click="clickBtn(10)">
  ...
  <script>
    clickBtn: (data) => {
      console.log(data);
    };
  </script>
</button>

  • DOM event에 접근할 경우
...
<button v-on:click="clickBtn">
  ...
  <script>
    clickBtn: (event)) => {console.log(event);}
  </script>
</button>

  • 데이터도 넘겨주고 DOM event에 접근할 경우
...
<button v-on:click="clickBtn(message, $event">
  ...
  <script>
    clickBtn: (message, event)) => {console.log(message, event);}
  </script>
</button>

토막상식 : @click은 함수가 바로 실행되고, @change는 값이 변화한 후에 실행된다.


고급 템플릿 기법

  • computed
    computed 속성은 언뜻 보면 methods 속성과 다르지 않다.
    하지만 computed는 캐싱을 이용하기 때문에 여러군데에서 해당 메서드를 호출한다면 미리 계속해놓은 하나의 값을 이용하여 전부 표현해준다. 또한 캐싱 덕분에 computed는 데이터가 변하기 전까지 값을 가지고 있으며, methods는 데이터의 변화 유무에 상관없이 메서드가 호출될 때마다 연산을 새로 한다.

  • watch
    데이터 변화를 감지하면 특정 로직을 수행해준다.
    주로 비동기 처리에 적합하다.

뷰 프로젝트 구성 방법

싱글 파일 컴포넌트 체계

.vue 확장자를 사용하며 아래와 같은 구조를 가지고 있다.

<template>
  <!-- html 태그 내용 -->
</template>

<script>
  export default {
    // 자바스크립트 내용
  };
</script>

<style>
  /* CSS 스타일 내용 */
</style>

뷰 CLI

싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있게 변환해주어야 한다.
뷰 CLI는 .vue파일을 변환하기 위해 번들러같은 설정을 번거롭기 할 필요 없이 프로젝트를 편하게 구성할 수 있게 도와준다.
뷰 CLI에서 제공하는 명령어를 이용하여 초기 프로젝트를 쉽게 구성할 수 있다.

  • 뷰 CLI 명령어
    명령어는 많지만 결국 지향점은 같다.
    번들러, 뷰 로더를 프로젝트 자체에 포함하여 사용할 수 있다.
템플릿 종류설명
vue init webpack고급 웹팩 기능을 활용한 프로젝트 구성 방식.
테스팅, 문법 검사 등을 지원
vue init webpack-simple웹팩 최소 기능을 활용한 프로젝트 구성 방식
빠른 화면 프로토타이핑용
vue init browserify고급 브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식
빠른 화면 프로토타입용
vue init simple최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa웹팩 기반의 프로그레시브 웹 앱 기능을 지원

뷰 로더

뷰 로더는 웹팩에서 지원하는 라이브러리이다.
.vue 파일의 내용을 브라우저에 실행 가능한 웹 페이지의 형태로 변환해준다.

웹팩에서 vue파일을 자바스크립트 모듈로 변환해주고, 필요에 따라 웹팩의 추가 플러그인을 이용하여 CSS, HTML 파일로 분리할 수도 있다.

Last Updated: