Vue에서 :함수 전달 vs @이벤트 사용 차이 완전 정리

Vue에서 상위 ↔ 하위 컴포넌트 간 통신을 할 때 헷갈리기 쉬운 문법 두 가지가 있습니다:

<!-- ✅ props로 함수 전달 -->
<EntryDetail :isActive="isActive" />

<!-- ❌ 이벤트 리스너 등록 -->
<EntryDetail @isActive="isActive" />

이 둘은 겉보기엔 비슷하지만 동작 방식이 완전히 다릅니다.

---

🔹 정답 먼저!

• :isActive="isActive" 👉 상위 → 하위로 "함수"를 전달하는 props 방식
• @isActive="isActive" 👉 하위 → 상위로 "이벤트"를 수신하는 방식

---

🔍 상세 비교

표현	의미	사용 시기	리턴값
:isActive="isActive"	상위 컴포넌트의 isActive 함수를 props로 하위에 전달	하위에서 상위 함수를 호출하고 결과를 받고 싶을 때	✅ 리턴값 사용 가능
@isActive="isActive"	하위 컴포넌트에서 this.$emit('isActive', ...args)로 발생시킨 이벤트를 상위에서 수신	하위 → 상위로 알림만 보낼 때	❌ 리턴값 없음

---

✅ 언제 :isActive="isActive"를 써야 하나요?

• 하위 컴포넌트에서 직접 함수처럼 this.isActive(...) 호출하고 싶을 때
• 함수의 리턴값 (예: true / false) 을 하위 컴포넌트에서 바로 사용해야 할 때

상위 컴포넌트

<!-- 상위 -->
<EntryDetail :isActive="isActive" />

// 상위 methods
methods: {
  isActive(requestType, start, end) {
    const today = new Date()
    const useStart = new Date(start)
    const useEnd =
      requestType === 'entry'
        ? new Date(`${end}T23:59:59+09:00`)
        : new Date(`${end}T07:00:00+09:00`)
    return useStart <= today && today < useEnd
  }
}

하위 컴포넌트

props: {
  isActive: Function,
},
created() {
  const result = this.isActive('entry', '2025-07-01', '2025-07-03')
  console.log(result) // true 또는 false
}

---

❌ @isActive="..."는 왜 안 되는가?

• @이벤트명="메서드"는 Vue가 이벤트 리스너를 등록하는 문법입니다.
• 하위 컴포넌트에서 this.$emit('isActive', ...)로 호출하면 상위 메서드가 실행되지만, 그 결과값을 하위에서 받을 수 없습니다.
• 즉, this.$emit()은 단방향 통신만 가능하고, 결과값은 내려오지 않습니다.

---

💬 결론 요약

목적	방식
상위의 함수를 하위에서 직접 호출하고 싶다	:isActive="isActive" (✅ props로 함수 전달)
하위에서 상위에게 알림을 보내고 싶다	@isActive="handleSomething" + this.$emit('isActive')

---

Vue에서는 상황에 따라 이 두 가지 방식을 적절하게 구분하여 사용하는 것이 중요합니다!