Vue.js 이벤트 핸들링 / Computed 속성 [스마트인재개발원]

이번 포스팅은 '스마트인재개발원' 랩실에서 진행한 7/22 6주차 Vue.js 에 관한 발표자료를 주제로 활용하였습니다.

 

 

Vue에서 이벤트를 다루는 방법에 대해서 알아보겠습니다.
HTML에는 <a>나 <input>과 같은 기본 이벤트들이 있는데요, 또한 자바스크립트를 통해서
기본 이벤트와 어우러지게 사용하는 방법들이 있습니다.
여기에서 Vue.js는 자바스크립트로 조금 어렵게 구현했던 기능들을 v-on 디렉티브를 통해서
좀 더 쉽게 구현할 수 있는 방법을 제공하고 있습니다.

v-on 디렉티브를 사용해서 이벤트를 처리하는 방법에 대해 알아보겠습니다.

페이지에 보여지는 숫자를 증가시키고, 감소시키는 간단한 카운터를 만들어보며 예제를 알아보겠습니다.

 

 

우리가 카운터를 만들기 위해선, 버튼의 click 이벤트 발생 시 우리가 준비한 작업을 할 수 있게 설정을 해야겠죠?

그러기 위해선 이벤트가 발생 했을 때 어떤 작업을 할 지 함수를 준비해주어야 합니다.

이 함수는 뷰 인스턴스 내부에 위치해 있는데,
Vue 객체와 관계가 있으므로, 이를 메소드(method)라고 부릅니다.

메소드를 준비할 때는, 우리가 뷰 인스턴스에서 사용할 데이터들을 data 안에 넣은 것처럼
함수들을 만들어서 뷰 인스턴스의 methods 안에 넣으면 됩니다!

 

button설정만 했을 때에는 그냥 클릭만 가능한, 아무 기능도 하지 않은 버튼들 입니다.
이제 v-on 디렉티브를 사용하여 기능을 넣어줍니다.
이 디렉티브를 설정 할 때는 다음과 같은 형식으로 쓰게 됩니다.

실행해보게되면..  더하기는 연도에서 +1씩, 빼기는 그반대로의 결과를 보여주게 됩니다.
Vue를 사용하면 자바스크립트를 그렇게 많이 입력하지 않아도, 이렇게 쉽게 구현할 수가 있습니다.

그리고 전의 v-on 코드를 좀 더 편하게 작성 할 수 있는 방법이 존재합니다. 바로 v-on: 을 @로 대체하는 것 입니다.

 

Vue에서는 복잡한 자바스크립트 구현을 간단히 처리하기 위해서 다음과 같은 수식어를 제공하고 있습니다.
이 수식어는 이벤트명에 .으로 연결하여 사용합니다.
그 밖에도 키 수식어라고 해서 키보드 이벤트 리스너로 key-up이나 엔터와 같은 키 수식어도 추가하여 사용할 수 있습니다.

---

 

Vue.js의 Computed 속성은 템플릿 내 복잡한 로직이 필요한 경우 이를 활용하면 좋습니다.

 

 

하지만 다음과 같이 너무 많은 연산이 템플릿 안에 들어가게 되면 코드가 비대해지고 유지보수가 어렵습니다.
이 코드는 더 이상 간단하고 명료하다고 볼 수 없겠죠?

message라는 데이터를 역순으로 표시한다는 것을 알려면 찬찬히 살펴봐야 할 것 입니다.

복잡한 로직이라면 반드시 computed 속성을 사용해야 하는 이유입니다.

 

 

 

다음 포스팅에서는  Computed  속성이 구체적으로 어떻게 쓰이는지에 대한 예제와 그 밖의 다양한 인스턴스 내의 데이터 접근법에 대해 설명해보도록 하겠습니다!

 

---

해당 수업은 '스마트인재개발원'에서 '지능형 IoT 융합 SW 전문가 과정(NCS) 과정'에서 진행한 교육내용입니다.

 

 

스마트인재개발원