콜백 함수의 종류

<template>
  <div @click="handleClick">여기를 클릭해봐라!</div>
  <div @click="() => count2 += 1">여기를 클릭해봐라!</div>
  <div @click="count3 += 1">여기를 클릭해봐라!</div>
</template>
<script>
const count1 = ref(0);
const count2 = ref(0);
const count3 = ref(0);

function handleCount() {
  count1.value += 1;
}
</script>

1. script의 함수로 이벤트 관리

2. ( ) => 콜백으로 이벤트 관리

3. 콜백 없이 바로 이벤트 작성

script와 콜백 없이 바로 사용

• 두 방법은 성능에 큰 차이가 없다.
• 두 방법 모두 함수를 한 번 만들어두고, 발동 때마다 작동된다.
• 한 줄에 끝낼 것 같은 거 funciton 써가며 추가하면 3줄이나 먹어서 돼지코드 되기 딱 좋다.
• 따라서 코드 상황 적당히 보고 1번이나 3번 중 선택해 쓰면 된다.

( ) => 콜백

• 성능이 제일 안 좋다.
• 얘는 이벤트 발생 때마다 새 함수를 만드는 메모리 잡아먹는 기계다. 이정도면 이스터 에그 아닌가요?
• 나도 리액트로 배울 때는 콜백으로 써야 오류가 덜 하다 하여 이 방법을 종종 사용했으나 지금은 손절치고 차단한 지 오래다. 이런 공부를 하고 나니 리액트에 대한 의심도 생긴다.

결론

• 코드 읽기 좋고 보기 좋게 2번 방법만 안 쓰면 된다!! 굳이 저거 왜 만든 거임?
• 물론 제일 좋은 방법은 <script>에서 함수를 만들어 해결하는 거라고 한다.
• 스크롤 압박이 조금 있더라도 우리의 손가락 관절보단 개발 퀄리티가 더 중요하니 성능에 신경쓰는 즐거운 개발자가 되자^__^