이슈

• Vue로 작성한 코드를 es6로 변환중, methods를 화살표 함수로 변환하는 과정 중 this가 값을 제대로 읽지 않음

• 변경 전 코드

<div id="app">
	<button v-on:click="greet">인사하기</button>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			name: 'pang'
		},
		methods: {
			greet: function(event){	//변경할 부분
				console.log(this.name);
				alert('Hello ' + this.name + '!');
			}
		},
	});
</script>

• 변경 전 콘솔 출력
  
  
  
  
• 변경 후 코드

<div id="app">
	<button v-on:click="greet">인사하기</button>
	</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			name: 'pang'
		},
		methods: {
			greet: (event) => {	//변경된 부분
				console.log(this.name);
				alert('Hello ' + this.name + '!');
			}
		},
	});
</script>

• 변경 후 콘솔 출력

• 변경전 코드는 this.name으로 data의 name값을 잘 받아오는데, 화살표 함수로 바꾸자마자 값을 제대로 받아오질 못한다.

---

해결

• 일반 함수의 this와 화살표 함수의 this는 다르다.

일반 함수의 this

• 자바스크립트의 경우 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

• 메서드(일반 함수) 호출 시 내부 코드에서 사용된 this는 해당 메서드를 소유한 객체, 즉 해당 메서드를 호출한 객체로 바인딩한다.

화살표 함수의 this

• 바인딩할 객체가 정적으로 결정된다.

• 화살표함수를 사용하게 된다면 자신의 this가 없는 대신, 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this로써 사용된다.

• 따라서 현재 범위에서 존재하지 않는 this를 찾는다면 화살표 함수는 바깥 범위에서 this를 찾기 때문에 일반적으로 화살표 함수에 this를 사용하지 않는다.
  
  

그래서?

• 화살표 함수와 this는 따로쓰자...

• 조금이라도 코드를 줄이고 싶다면 속성에 함수를 정의할 때 function 예약어 생략하는 방식을 사용한다. 방법은 다음 코드와 같다.
  
  
  

• 변경 전 코드

<div id="app">
	<button v-on:click="greet">인사하기</button>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			name: 'pang'
		},
		methods: {
			greet: function(event){	//변경할 부분
				console.log(this.name);
				alert('Hello ' + this.name + '!');
			}
		},
	});
</script>

• 변경 후 코드

<div id="app">
	<button v-on:click="greet">인사하기</button>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			name: 'pang'
		},
		methods: {
			greet (event)  {	//변경할 부분
				console.log(this.name);
				alert('Hello ' + this.name + '!');
			}
		},
	});
</script>