[Vue] 뷰 컴포넌트 메서드에서 Arrow Function을 사용하면 어떻게 될까? ( Enhanced Object property, this )

 

예전에 this를 공부하면서 일반함수와 Arrow Function에서의 this가 다르다는 것을 배웠다.

그렇게 기억하고 있다가, 이번에 Vue 컴포넌트 코드를 작성하고 있는데, methods안에 메서드를 선언하는데

Arrow Function으로 작성하고 싶은 욕심이 생겼다.. 그래서 작성한 코드는 아래...

 

예제

import dummyData from './data.js'; // 더미데이터 import

export default{
	template : `
		  <div @click="getYoutubeList()">테스트</div>
	`,
    data () {
        return {
            data : {} // 데이터 하나 선언
        }
    },
    mounted () {
        this.data = dummyData; // 마운트 되었을 때 더미데이터를 넣어줌..
    },
    methods () {
        getYoutubeList : () => {
               console.log(this.data); 현재 컴포넌트의 data객체안에 있는 data를 콘솔에 찍음
        }
    }
}

 

 

data.js안에는 그냥 더미데이터가 있고 그녀석을 import해와서, 뷰인스턴스가 랜더링 될 때 ( mounted ) 

data에 넣어주고 있다... 물론 머리로는 안된다는 것을 알고 있는데, 그냥 Arrow Function을 쓰고 싶었다.

( 무조건 Arrow Function을 사용하려는 건 지양하는 게 맞다.. )

 

 

결과

 

 

당연하지만 현재 this는 Arrow Funtion을 바라보고 있기에 컴포넌트 자체를 바라보고 있지 않다. 그래서 this도 undefined인 상태.. Arrow Function으로 함수 작성은 가능하지만, 현재 컴포넌트의 데이터를 사용못하는 상황

 

그래서 찾은 방법이 ES6의 객체 리터럴 프로퍼티 축약 기능을 사용했다. Arrow Function은 아니지만

function을 갖다 붙이는 것보다 코드가 더 깔끔해져서 좋은 느낌 ( 축약 표현 참조 )

 

 

 

변경사항

-- 변경전
getYoutubeList : function() {
    console.log(this.data);
}
  
-- 변경후  
getYoutubeList () {
    console.log(this.data);
}

 

 

전체코드

import dummyData from './data.js';

export default{
	template : `
		  <div @click="getYoutubeList()">테스트</div>
	`,
    data () {
        return {
            data : {}
        }
    },
    mounted () {
        this.data = dummyData;
    },
    methods : {
        getYoutubeList () {
               console.log(this.data);
        }
    }
}

 

결과