Vue.js] 3. 반응형 기초

Vue.js는 2가지 개발 스타일이 있다. 

1. Option API

2. Compisiton API

Vue.js 공식문서에서 API를 설정하여 문서를 확인할 수 있다. 

 

Option API는 Vue.js 기본 방식으로 컴포넌트를 구성하는 옵션 properties, methods, computed, watch등을 객체 형태로 정의한다. 기존 Vue 개발자에게 익숙한 스타일이다. 

 

Composition API는 Vue 3에 도입된 새로운 방식으로 함수형 프로그래밍의 장점을 활용한다. setup함수를 통해 컴포넌트 로직을 정의하며, 재사용성과 코드 구조의 명확성을 높인다. 

 

여기서는 기존의 Option API에 대해 알아보자. 

반응형 상태 설정

data 옵션을 사용한다, 인스턴스를 처음 만들 때만 추가되므로 나중에 사용하는 경우에도 임시로 어떠한 값이라도 넣어 선언해두어야 한다. 

data에 포함하지 않고 this에 직접 새 속성을 추가할 수 있지만, 이후 반응형 업데이트 동작이 이루어지지 않는다. 

 

메서드 선언

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 메서드는 생명 주기 훅 또는 다른 메서드에서 호출할 수 있습니다!
    this.increment()
  }
}

export default {
  methods: {
    increment: () => {
      // 나쁨: 여기서 `this`에 접근할 수 없습니다!
    }
  }
}

methods를 정의할 때 화살표 함수는 지양한다. 

methods는 컴포넌트 템플릿 내에서 접근할 수 있으며, 주로 이벤트 리스너로 사용됩니다.

<button @click="increment">{{ count }}</button>

DOM 업데이트 타이밍

data가 변하면 DOM이 자동 업데이트 되지만, 동기적으로 적용하지 않는다. 

DOM 업데이트가 완료될 때까지 기다리려면 nextTick() API를 사용한다. 

import { nextTick } from 'vue'

export default {
  methods: {
    async increment() {
      this.count++
      await nextTick()
      // 이제 DOM이 업데이트되었습니다.
    }
  }
}