Vuejs에서 함수를 선언하여 사용하다보면, 예상치 못한 곳에서 에러가 나는 경우가 있습니다. 바로 this로 가리키고 있는 vue instance내의 method나 data들이 전혀 불러와지지 않는 에러들이 그것입니다. 궁여지책으로 해당 함수 위에 let vueThis = this와 같이 this를 새로운 변수에 할당하여 문제를 해결하기도 합니다. 이유는 모르지만 어쨌든 해결은 되니까요! 찡긋(엉엉엉)
이번에는 이러한 에러들이 일어나는 이유와 해결방법에 대해 알아봅시다.
ES6
이를 위해서는 ECMAScript 표준의 6번째 에디션(줄여서 ES6)를 알아야만 합니다. 정확히는 ES6내의 Arrow Function에 대해 알아야합니다.
간단히 이야기하면 ECMAScript는 자바스크립트 표준 단체인 ECMA가 제정하는 자바스크립트 표준입니다. 뒤의 6은 여섯번째 에디션이라는 의미입니다. 발전해가는 웹 개발 생태계에 발맞춰 필요한 여러가지 문법이나 기준들을 표준화하고 공표해줌으로서 개발생태계의 일관성을 유지해주는 역할을 하는 겁니다. 우리가 하고 있는 과정에서 이 모든 것을 상세히 알아보기는 어렵기 때문에 아래의 링크로 상세한 설명을 대체합니다. 혹시 관심있으신 분들은 아래의 링크를 참조하시기 바랍니다.
우리는 위에서 언급했듯이 이 중 Arrow Function(화살표함수)에 대해서만 이야기를 나누겠습니다. this를 통해 Vue Instance를 가리키는 Vuejs 특성 상 이 this의 위치(라고 저는 부릅니다)가 바뀌어서 우리가 마주하게 되는 에러가 굉장히 많기 때문입니다.
Arrow Functions
이미 아시는 분들도 계실테지만 arrow function은 JavaScript로 함수를 선언할 때 사용하는 새로운 함수 정의 방식입니다.
// 기존의 함수 선언방법
function() {
}// arrow function
() => {}
위에서 보시다시피 우리는 function ()으로 함수를 선언해 주었었는데 arrow function은 기존의 방식과는 다르게 더 짧게 함수를 선언할 수 있습니다. 그렇다면 이 둘의 차이는 길이에만 있는 것일까요?
아래의 예를 보면서 그 차이를 알아보도록 하겠습니다.
복잡해보이지만 간단한 함수입니다. 같은 기능을 하는 두개의 함수를 @click로 각각의 버튼에 바인딩 해두었습니다. 두개의 함수 모두 3초 뒤에 각각 originalNumber와 arrowNumber를 3으로 변경시키는 동작을 합니다.
setTimeout은 인자로 함수와 숫자를 받습니다. 숫자는 마이크로초를 의미하며 숫자 마이크로초 뒤에 함수를 실행시키는 역할을 합니다.
그렇다면 같아 보이는 이 두 함수의 차이는 무엇일까요? 네, 하나는 setTimeout의 함수 인자가 기존 함수선언 방법을 쓰고 있다는 것이고 하나는 arrow function을 사용하고 있다는 것입니다.
두개의 버튼을 각각 클릭한 뒤 3초(3000 마이크로초)를 기다려보시면 결과적으로 기존함수로 선언한 originalFunction()은 동작하지 않고 arrowFunction()은 동작하는 것을 보실 수 있습니다. 좀 더 자세히 결과를 살펴보기 위해 각각의 setTimeout 함수 안에 콘솔로그를 찍어보았습니다.
보시는 것처럼 3초뒤에 각각의 함수는 모두 실행되는 것을 알 수 있습니다. 그렇다면 왜 originalFunction()은 this.originalNumber = 3이 실행되지 않고, arrowFunction()은 this.arrowNumber = 3이 실행된걸까요?
차이점: this가 가리키는 대상
그 이유는 바로 this가 가리키고 있는 대상, 즉 this의 위치가 바뀌었기 때문입니다. 내가 지금 거실에 있을 때 “나 여기 있어!”라고 하면 ‘여기'는 거실이지만, 내가 지금 방에 있을 때 “나 여기 있어!”라고 하면 ‘여기'가 방이 되겠죠?
이처럼 원래 Vue Instance내에서 this는 Vue Instance를 가리키고 있습니다. 하지만 함수가 선언이 될때, 어떤 방식으로 함수를 선언해주느냐에 따라 함수의 현 위치(?)가 바뀌게 되는 것입니다.
기존 함수 선언 방법인 function()은 this가 새로 선언된 함수 내부를 가리키게 됩니다. 반면에 arrow function은 함수가 선언되든 말든 원래의 위치를 유지하게 만들어서 this 가 Vue Instance를 가리킵니다.
즉, ‘원래 함수가 선언될 때 this의 위치가 바뀌어야 하는데 arrow function은 현 위치를 유지하게 만든다.’ 이것이 arrow function이 갖는 매우 중요한 차별점입니다.
즉, originalFunction()은 this.originalNumber = 3은 this가 Vue Instance가 아닌 함수 가리키고 있기 때문에 Vue Instance의 data 안에 선언된 originalNumber를 찾을 수 없어서 기능이 실행되지 않은 것입니다. 하지만 arrowFunction()은 this 가 그대로 Vue Instance를 가리키고 있기 때문에 data내의 originalNumber를 찾아서 기능이 실행되었다고 이해하시면 됩니다.
주의사항
하지만 VueJS의 모든 함수를 arrow function으로 사용해야만 하는 것은 아닙니다. 아래와 같이 뷰 인스턴스의 속성들을 정의할 때는 arrow function을 사용하면 기능이 동작하지 않으니 주의해주세요.
methods : {
arrowFunction: () => {
setTimeout(() => { // arrow Function
console.log('arrow timeout')
this.arrowNumber = 3
}, 3000)
}
}