[Vue 3] 컴포넌트의 methods

컴포넌트 안의 데이터를 data 로 정의했듯이 특정 기능들을 모아놓은 속성이 methods 가 있습니다. 이번 글에서는 이에 대해 자세히 다뤄보도록 하겠습니다.

methods

함수(function)와 메소드(method)를 혼용해서 부를 때가 많은데, 메소드도 함수이긴 하지만 정확히는 클래스나 객체 등에 들어가서 사용되는 함수들을 말합니다. 즉, 여기서는 컴포넌트의 함수들이라 할 수 있죠.

methods 문법

methods 에 객체를 만들고 이 곳에 사용할 함수들 정의 해주면 됩니다.

      export default {
	methods: {
		함수명: function () {
			// 함수 내용
		}
	}
}
    

data를 활용하기

만약 data에 greet 데이터가 있다고 해보겠습니다.

      data() {
	return {
		greet: "안녕하셔유",
	}
}
    

greet의 문자열 뒤에 from vuelog를 붙여서 반환해주는 함수 send를 만들어보겠습니다. 컴포넌트 내에 있는 데이터 함수 등은 this를 통해 접근할 수 있습니다.

      methods: {
	send: function () {
		return this.greet + ' from vuelog';
	}
}
    

data 에 있던 값은 template에서 접근할 수 있었듯이 methods도 가능합니다. Javascript에서 함수를 사용하듯 send() 를 넣어주시면 됩니다.

      <template>
	<p> {{ send() }} </p>
</template>
    

화살표 함수 금지

함수를 좀 더 간단하게 표현하려고 function() {} 대신 화살표 함수(()=>{}) 를 사용한다면 this로 이 함수에 접근할 수 없게 됩니다.

그래서 다음과 같이 클래스 메소드 선언하듯이 해주는 것을 추천합니다.

      methods: {
	send() { // send: function () {
		return this.greet + " from vuelog";
	}
}
    

nextTick - DOM 업데이트 타이밍

methods에서 만약 값을 바꾼다면 DOM은 바로 반영이 되지 않습니다.

      increment() {
	// count 값: 0 -> 1
  this.count += 1;

  // 업데이트 되기 전이라 0이 나옵니다.
  console.log(document.getElementById("counter").textContent); 
},
    

그래서 만약 method 내에서 값을 변화시키고 DOM에 반영하고 싶다면 비동기 함수 nextTick을 이용하면 됩니다.

      increment() {
	// count 값: 0 -> 1
  this.count += 1;
	
	// 0
  console.log(document.getElementById("counter").textContent);
	// DOM 업데이트 되었을 때 실행
	nextTick().then(() => {
		// 1
		console.log(document.getElementById("counter").textContent);
	});
},
    

stateful 메소드 주의

가끔 함수를 사용하는 것이지만 내부적으로 상태가 있는 함수들을 유의해야합니다.

예를 들면, lodash의 debounce함수가 있는데요.

      debounce는 JS 성능을 올리기 위한 이벤트 제한 기법으로, 빠르게 이벤트가 발생하면 일정 시간이 지난 후에 하나만 이벤트가 발생하도록 합니다.
    

다음과 같이 어떤 debounce된 함수를 만들었다고 해보겠습니다.

      import { debounce } from 'lodash-es'

export default {
  methods: {
    click: debounce(function () {
      // ...
    }, 1000)
  }
}
    

1초내에 계속 클릭한다면 이벤트 처리하지 않고 있다가 1초 내에 안 누른 마지막에 이벤트를 처리하고 싶은 상황입니다. 그리고 이 컴포넌트는 재활용되서 두 군데서 다음과 같이 사용된다고 해보겠습니다.

원래라면 다음과 같이 각각 다른 시기에 click에 대한 처리가 일어나야합니다.

하지만 위에서처럼 debounce 함수를 만들 경우 동일한 타이머를 가지기 때문에 서로 영향을 주게 됩니다.

그러니 각자 고유한 timer를 가질 수 있도록 변수를 별개로 둬주는 것이 좋습니다!

      export default {
  created() {
    // 각 컴포넌트 인스턴스 click 함수는 고유한 타이머를 가집니다
    this.debouncedClick = _.debounce(this.click, 1000)
  },
  methods: {
    click() {
      // ...
    }
  }
}
    

이렇게 구현해야 컴포넌트끼리 서로 영향 주는 일이 없어집니다.

마무리하며

methods 속성은 컴포넌트의 메소드들을 정의하는 곳이라고 생각해주시면 되겠습니다. 다음 시간에는 data를 좀 더 간편한 값으로 바꿔주는 computed 속성에 대해 알아볼게요!