[Udemy Vue 완벽가이드 Section2] 18. Vue앱 내에서 데이터 작업하기 (this가 무엇인지)

Vue애플리케이션을 만드는 방법(createApp함수)과 데이터를 출력(보간법)하고 속성에 데이터를 바인딩하는 방법(v-bind)을  배웠다.

data속성에 데이터를 설정하건, HTML 코드에서 해당 데이터를 참조할 수도 있고, methods를 정의하여 호출할 수도 있다.

 

Vue에서 데이터를 가지고 작업하는 방식에 대해 알아보자.

const app = Vue.createApp({
 data(){
  return {
   courseGoalA: 'Finish the course and learn Vue!',
   courseGoalB: 'Master Vue and build amazing apps!',
   vueLink: 'https://vuejs.org/'
  }
 },
 methods: {
  outputGoal(){
   const randomNumber = Math.random();
   if(randomNumber < 0.5) {
    return courseGoalA; //여기에 courseGoalA를 바로 쓸 수 없다.
    //이렇게 입력하면 JS는 courseGoalA라는 이름의 변수나 상수를 찾을텐데, courseGoalA는 변수도 상수도 아닌 data객체의 프로퍼티이므로 찾을 수 없다.
    return this.courseGoalA;
   } else {
    return this.courseGoalB;
   }
  }
 },
})

 

 

Vue는 data에서 반환하는 객체, methods의 함수들 전체를 가져다가 병합하여 전역 Vue인스턴스 객체를 만든다. 

위 코드를 예시로 들어 Vue 인스턴스 객체를 적어보면, 아래와 같지 않을까.

{
  courseGoalA: 'Finish the course and learn Vue!',
  courseGoalB: 'Master Vue and build amazing apps!',
  vueLink: 'https://vuejs.org/'
  outputGoal: function() { 
   const randomNumber = Math.random();
   //이하 생략
  }
}

 

그리고 this는 위 Vue 인스턴스 객체를 가리킨다.

 

그러므로, this키워드를 사용하면 전역 Vue 인스턴스 객체에 저장된 모든 데이터, method에 접근할 수 있다.

따라서, 위 예시처럼

methods에 작성된 함수에 'this.courseGoalA', 이렇게 this키워드를 사용하여 courseGoalA라는 data, 또는 다른 methods옵션에서의 함수를 참조할 수 있다. 

 

this가 참조하는게 무엇인지 알아야 한다.

 

 

 

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.