(22.10.26)var vm = this; 를 쓰는 이유

정말 오랜만에 하는 포스팅이다.

 

Vue.js 강의 들으면서 프로젝트에 관한 것들을 많이 고민하다보니

 

블로그의 존재를 그만 잊어버린 듯 하다..

 

(지금 보다는 더 자주) 포스팅 주기를 좁혀야 겠다.

 

여튼 회사 프로젝트도 해야하고 백엔드 개발자로서 관리자 웹페이지 정도는 간단하게 만들 줄 알아야 한다는 생각이 들어서

 

9월말 부터 Vue.js를 공부하면서 코드도 짜보고 있다.

 

어제 아는 형의 코드를 보던 도중, 이해할 수 없는 부분을 발견했다.

 

export default {
	mthods: {
	var vm = this
		// ...
		// ...
	},
}

 

Vue 내부에서 this를 쓰는 것이 아니라, this 대신 vm을 사용하는 것 이었다. 그래서 직접 물어봤는데 현업 개발자 분이

실무에서도 이렇게 쓴다고 이렇게 썼다고 했다.

 

 

Why?

 

그래서 왜 이런방식으로 진행하는 지 구글링으로 내용을 찾아 보았다.

이유는 꽤나 간단하면서도 이해하기가 어려운 부분이 있었다.

 

자바스크립트에서는 함수 내부에서 새로운 함수를 선언할 때, 즉, function() {} 문법의 내부에서는 새로운 context가 생성이 되고 이 때, this는 우리가 기대와는 다르게 Vue를 참조하지 않고 함수 그자체를 참조하고 있다. 다음 예시 코드를 보자.

 

AddTicket: function () {
  // 여기서 "this"는 Vue를 가리킨다(참조한다.)
  // 그러므로 여기서는 얼마든지 this를 통해 Vue의 data에 접근이 가능하다.
    axios.post('/api/Tickets', ...)
      .then(function (response) {
        // 여기서의 "this"는 Vue를 참조하지 않는다!!       
      })
}

axios.post(....).then() 내부의 function() {} 문법으로 새로이 생성된 함수는 자신만의 context를 가지게 되며 따라서, this는 Vue가 아니라 함수 그 자체를  가리키게 되는것이다.

 

그래서 이를 해결하기 위한 방안은 2가지이다.

 

1. Arrow function. (  () => {}  )

AddTicket: function () {
  // 위와 같이 여기서는 "this"가 Vue를 가리킨다.
    axios.post('/api/Tickets', ...)
      .then((response) => {
        // 여기서의 "this"도 Vue이다.
      })
}

Arrow function 문법을 사용해서 함수를 선언하면 함수 자체적인 context를 만들지 않기 때문에 this를 써도 안전하다고 한다.  

2. Closure

AddTicket: function () {
  const self = this // 여기서 우리가 원하는 this의 참조를 저장해 놓는다.
    axios.post('/api/Tickets', ...)
      .then(function(response){
        // 그리고 여기서는 "this"를 더 이상 쓸 수는 없지만, 대신
        // 선언해 놓은 self 변수를 이용해 기존의 참조를 접근할 수 있다.
        self.tickets = response
      })
}

위와 같이 변수에 "this" 참조를 저장해 놓음으로써 새로운 함수 내부에서도 변수를 통해 접근 가능하도록 하는 방법도 있다.

이 방법이 바로 위에서 보았던

var vm = this; 이다.

 

3.bind method

bind라는 method를 사용하는 것인데, 요즘은 잘 쓰이지 않는다고 하니 그냥 패스하면 될것 같다.

 

 

오늘은 자바스크립트의 기본 문법에 대한 것을 알아 보았다.

 

끝!

 

 

참고:https://stackoverflow.com/questions/47148363/when-to-use-vm-or-this-in-vue-js (스택오버플로우)