[Vue.js] Vue 이벤트 핸들러로 click 감지하기

💡 실습 포인트!

• 이번 시간에는 JavaScript 나 React 에서 사용하던 click 이벤트 핸들러를 Vue 에서는 어떤 식으로 사용하는지 알아보았다.

---

💜 "허위매물신고" 버튼 클릭시 신고 수 표시하기 

🤍 레이아웃 만들기

<div>
    <h4>{{ rooms[0] }}</h4>
    <p>{{ prices[0] }}만원</p>
    <button>허위매물신고</button> <span>신고 수: 0</span>
</div>

• 위와 같이 코드를 작성하여 허위매물신고 버튼을 만들고, 그 옆에 신고 수를 표시하는 레이아웃을 만들어보았다.

 

---

🤍 "허위매물신고" 버튼 옆 신고 수 부분 데이터바인딩하기

<script>
export default {
	name: "App",
	data(){
		return {
			navbar : ['Home', 'Rooms', 'About'],
			rooms : ['둔산동 원룸', '갈마동 원룸', '괴정동 원룸'],
			prices : [55, 43, 38],
			report : [0, 0, 0],
		}
	},
};
</script>

• 먼저, 신고 수를 기록 및 저장할 수 있는 변수나 데이터가 필요하므로, data 보관함 안에 report 라는 array 자료형을 값으로 가지는 object 를 하나 추가해주었다.
• 위 html 코드에는 버튼이 하나지만, 전체 html 코드에 총 3개의 버튼이 필요하므로 report 는 숫자가 아니라 3개의 데이터가 들어간 array 자료형으로 만들어 값으로 넣어준 것이다.

 

<div>
    <h4>{{ rooms[0] }}</h4>
    <p>{{ prices[0] }}만원</p>
    <button>허위매물신고</button> <span>신고 수: {{ report[0] }}</span>
</div>

• 이제 신고 수 라는 글자 옆에 {{ report[0] }} 이라고 넣어주면 data 보관함의 report 에 해당하는 array 자료형의 0번 인덱스 데이터가 들어오므로, 이전에 하드코딩했던 때와 동일하게 브라우저에서 0 이라는 숫자를 확인할 수 있다.

---

🤍 "허위매물신고" 버튼 클릭 시 신고 수 증가하는 기능 만들기 (함수 사용X)

<div>
    <h4>{{ rooms[0] }}</h4>
    <p>{{ prices[0] }}만원</p>
    <button @click="report[0]++">허위매물신고</button> <span>신고 수: {{ report[0] }}</span>
</div>

• JavaScript 에서는 onclick='' 이벤트 핸들러를, React 에서는 onClick="" 이벤트 핸들러를 html 태그에 달아주었었다.
• 반면 Vue 에서는 v-on:click="" 이벤트 핸들러나 v-on: 을 축약한 @ 기호를 사용한 @click="" 과 같은 형태로 동일한 기능을 사용할 수 있다.
• 내가 원하는 기능은 현재 신고 수인 report[0] 에 + 1 을 해주는 것이므로 위와 같이 report[0]++ 로 코드를 작성해주었다.
• 이 외에도 report[0} += 1 과 같이 작성해도 동일한 기능을 수행한다.
• 이벤트 핸들러는 JavaScript 나 React 처럼 @click 외에도 @mouseover, @input 등과 같은 것들이 있다.

---

🤍 "허위매물신고" 버튼 클릭 시 신고 수 증가하는 기능 만들기 (함수 사용O)

<div>
    <h4>{{ rooms[0] }}</h4>
    <p>{{ prices[0] }}만원</p>
    <button @click="increase(0)">허위매물신고</button> <span>신고 수: {{ report[0] }}</span>
</div>

• 이번에는 동일한 기능이지만 함수를 사용해서 코드를 작성해보았다.
• 먼저 report[0]++ 대신에 increase 라는 이름의 함수를 사용할 것이므로 increase() 의 형태로 작성해주었다.
• 그리고 각 버튼마다 독립적으로 작동해야 하므로, 첫번째 버튼은 파라미터로 0 을 받아주었다. 

<script>
export default {
	name: "App",
	data(){
		return {
			navbar : ['Home', 'Rooms', 'About'],
			rooms : ['둔산동 원룸', '갈마동 원룸', '괴정동 원룸'],
			prices : [55, 43, 38],
			report : [0, 0, 0],
		}
	},
	methods: {
		increase(i){
			this.report[i]++;
		}
	},
};
</script>

• 이제 increase() 함수를 만들어주면 된다.
• methods 를 작성하는 부분이 있으면 바로 그 안에 함수를 만들어주면 되고, 없다면 위와 같이 methods: { } 형태로 작성해준 후 그 안에 함수를 만들어주면 된다.
• 그리고 data 보관함에서 data 를 가져다 사용하고 싶다면 꼭 this.데이터이름 의 형태로 코드를 작성해주어야 한다.
• this 는 바로 위 data 보관함을 담은 큰 object 라고 생각하면 된다.