VueJS에서 setTimeout 사용하는 방법, 타이머 만들기

VueJS에서 setTimeout() 타이머 함수를 만드는 방법을 알아봅니다. 어떻게하면 될까요?

# VueJS setTimeout() 함수 만드는 방법

물론 VueJS에서도 setTimeout()을 사용할 수 있습니다. 자바스크립트이므로 당연히 동작합니다. 하지만 VueJS의 모델에 접근할 수 없으므로 내장함수가 있다면 이를 사용하거나 아니면 다른 방법을 사용해야하죠.

하지만!!!
타이머 함수를 위한 내장함수가 별도로 존재하지 않으며 setTimeout()을 사용하여 해당 vue의 scope에 접근할 수 있는 방법이 존재합니다. 이 경우 두 가지 방법이 있는데요~ 아래에서 알아보세요.

! Arrow 함수를 사용하는 방법

ES6에 사용되는 Arrow 함수를 사용하면 VueJS의 scope 영역을 his를 사용하여 접근 가능합니다. 아래와 같이 사용하면 됩니다.

! bind(this)를 사용하여 this 객체를 바인딩하기

vuejs의 bind() 함수에 this를 전달할 수 있습니다. 이때 아래와 같이 사용합니다.

위와같이 콜백함수의 뒤에 bind()를 사용하여 this를 전달하면 됩니다. 여기까지 VueJS에서 setTimeout()을 사용하는 방법을 알아보았습니다.