선생님의 말씀대로 직접 만들어보려고 가위바위보 프로젝트를 혼자 소소하게 진행중입니다.
그러던 중, 함수와 함수 호출에 대해 궁금해서 질문을 드립니다.
현재 사용된 changeIconFunc는 arrow functions으로 만든 것도 아니고 제가 따로 return 값을 넣어주지 않았습니다.
그럼에도 mounted에서 changeIconFunc을 사용할 때는 함수 호출 형식으로 사용해야 합니다. 왜 그런 것일까요???
궁금했던 부분에 대해서 빨간색으로 표시하겠습니다.
----------------------------------------------------------------------------------------------------
<template>
<div>
<h1>가위 바위 보!</h1>
<h2>{{ result }}</h2>
<h2>{{ score }}</h2>
<h2>{{ user }}</h2> :
<h2>{{ computer }} </h2>
<button @click="choiceButton('✌️')">가위!</button>
<button @Click="choiceButton('✊')">바위!</button>
<button @Click="choiceButton('🖐')">보!</button>
</div>
</template>
<script>
let iconInterval = null;
const iconScore = {
'✊': 1,
'✋': 0,
'✌️': -1,
}
export default {
name: 'App',
data() {
return {
computer: '✊',
user: '',
score: '',
result: '',
}
},
mounted() {
<span style="color: #ff0000;"> this.changeIconFunc();</span>
<span style="color: #ff0000;"> // 왜 this.changeIconFunc;는 안되는건가요???</span>
},
destroy() {
clearInterval(iconInterval);
},
methods: {
<span style="color: #000000;">changeIconFunc:</span> function () {
iconInterval = setInterval(()=> {
if (this.computer === '✌️') {
this.computer = '✊';
} else if (this.computer === '✊') {
this.computer = '🖐';
} else if (this.computer === '🖐') {
this.computer = '✌️'
}
},100);
},
choiceButton(choice) {
this.user = choice;
clearInterval(iconInterval);
console.log('clear');
const diff = iconScore[this.user] - iconScore[this.computer];
if (diff === 0) {
this.result = '비겼습니다';
} else if ([-1, 2].includes(diff)) {
this.result = '이겼습니다';
this.score++;
} else {
this.result = '졌습니다.';
this.score--;
}
setTimeout(() => {
this.changeIconFunc();
console.log('interval');
}, 1000)
},
},
}
</script>
