선언적 렌더링과 입력 핸들링

이전 글에서 완성한 템플릿에 이어서 진행해주시면 됩니다. 본격적으로 Vue.js의 문법에 대해 살펴보도록 합시다.

데이터를 정의하고 이를 갱신할 수 있는 이벤트 핸들러를 만들어보겠습니다.

1. 기본 구성

<template>
  
</template>

<script>
export default {
  
}
</script>

<style>

</style>

App.vue는 SFC(Single File Component)이며, 위와 같이 3가지의 태그로 구성되어있습니다.

template는 HTML, script는 JavaScript 마지막으로 style에는 CSS(SCSS)에 대한 내용을 명시해주시면 됩니다. 당연하게도 template와 script에서는 Vue에서 제공하는 기본적인 문법을 사용해야만 합니다.

2. 기본 코딩

Vue를 이용하여 기본적인 내용을 코딩하여 숫자 0을 화면에 출력해보도록 하겠습니다.

2.1 App.vue

<template>
  <h1>{{ count }}</h1> // h1 태그 내에 count라는 변수 입력
</template>

<script>
export default {
  data() {
    return {
      count: 0 // count가 갖고 있는 data인 "0"을 출력
    }
  }
}
</script>

<style> 
  h1 { // h1 태그의 스타일 속성 추가
    font-size: 50px;  
    color: royalblue;
  }
</style>

3. 클릭 시 숫자 증가

위에서 만든 숫자 0을 클릭하면 숫자가 1씩 증가하는 페이지를 구현해보도록 하겠습니다.

3.1 script

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

위와 같이 methods에 increase라는 함수를 만들어서 실행될 때마다 count라는 데이터를 this라는 키워드로 접근하여 숫자 1씩 증가시키고 있습니다. 여기서 this는 script 부분을 지칭합니다.

3.2 template

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
</template>

<h1 @click="increase"> 내용으로 h1 태그를 클릭하면 increase 함수를 실행합니다.

4. 반응성(Reactivity)

위의 내용을 코딩하여 데이터를 정의하고 이를 갱신할 수 있는 이벤트 핸들러를 만들어 보았습니다.

여기서 중요한 것은 count라는 데이터를 갱신하면, 그것이 연결되어있는 브라우저의 화면도 같이 갱신된다는 것입니다. 이를 반응성(Reactivity)이라 하며, 다시 말해 데이터를 갱신하면 화면도 바뀐다는 것입니다.

이는 Vue.js, React 등의 프론트엔드 프레임워크의 가장 핵심적인 개념 중의 하나입니다.