Vue.js] 10. 생명 주기 훅, Watchers

각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 합니다. 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 합니다.

 

생명 주기 훅 등록하기

예를 들어 mounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있습니다:

export default {
  mounted() {
    console.log(`컴포넌트가 마운트 됐습니다.`)
  }
}

모든 생명 주기 훅은 호출하는 현재 활성 인스턴스를 가리키는 this 컨텍스트로 호출됩니다. 이것은 생명 주기 훅을 선언할 때 화살표 함수를 사용해선 안 된다는 것을 의미합니다. 그렇지 않으면 this를 통해 컴포넌트 인스턴스에 접근할 수 없기 때문입니다.

 

Watchers

export default {
  data() {
    return {
      question: '',
      answer: '질문에는 보통 물음표가 포함됩니다. ;-)',
      loading: false
    }
  },
  watch: {
    // question이 변경될 때마다 이 함수가 실행됩니다
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.getAnswer()
      }
    }
  },
  methods: {
    async getAnswer() {
      this.loading = true
      this.answer = '생각 중...'
      try {
        const res = await fetch('https://yesno.wtf/api')
        this.answer = (await res.json()).answer
      } catch (error) {
        this.answer = '오류! API에 도달할 수 없습니다. ' + error
      } finally {
        this.loading = false
      }
    }
  }
}
<p>
  예/아니오 질문을 하세요:
  <input v-model="question" :disabled="loading" />
</p>
<p>{{ answer }}</p>