[Vue.js] 선언적 렌더링과 입력 핸들링

1. 기본 구성

//App.vue
<template>
  
</template>

<script>
export default {
  
}
</script>

<style>

</style>

App.vue는 3가지의 태그로 구성되어있습니다.

 

template는 HTML, script는 JavaScript, style에는 CSS(SCSS)에 대한 내용을 명시해주면 됩니다.

 

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 등의 프론트엔드 프레임워크의 가장 핵심적인 개념 중 하나입니다.