[Vue.js] 템플릿에서 함수 호출: 데이터 처리 및 UI 제어

 

Vue.js 템플릿에서 컴포넌트 메서드를 호출하여 데이터 처리 및 UI 제어를 수행할 수 있습니다. 이 기능을 활용하면 템플릿 코드를 간결하게 유지하면서 동시에 데이터를 효율적으로 처리하고 다양한 UI 요소를 제어할 수 있습니다.

이 블로그 게시물에서는 Vue.js 템플릿에서 함수 호출을 사용하는 방법, 실제 코드 예시, 장점과 단점, 그리고 주의 사항에 대해 자세히 살펴보겠습니다.

1. 템플릿에서 함수 호출 개요

바인딩 표현식 내에서 v-on 지시문을 사용하여 컴포넌트 메서드를 호출할 수 있습니다. v-on 지시문은 이벤트 처리뿐만 아니라 함수 호출에도 사용될 수 있습니다.

HTML

<button @click="handleClick">클릭</button>

 

위 예제에서 handleClick 메서드는 버튼 클릭 시 호출됩니다.

2. 템플릿에서 함수 호출 활용

다음은 템플릿에서 함수 호출을 활용하는 몇 가지 예제입니다.

예제 1: 데이터 포맷팅

HTML

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

 

위 예제에서 formatDate 메서드는 날짜를 원하는 형식으로 문자열로 변환하고, toTitleDate 메서드는 날짜 문자열을 제목으로 사용합니다.

예제 2: API 호출 결과 처리

HTML

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }} - {{ formatPrice(item.price) }}
  </li>
</ul>

 

위 예제에서 formatPrice 메서드는 가격을 원하는 형식으로 문자열로 변환합니다.

예제 3: 조건부 UI 제어

HTML

<div v-if="isEditing">
  <input v-model="editedItem.name">
  <button @click="saveEdit">저장</button>
</div>

<div v-else>
  {{ editedItem.name }}
  <button @click="editItem">수정</button>
</div>

 

위 예제에서 editItem 메서드는 편집 모드로 전환하고, saveEdit 메서드는 편집 내용을 저장합니다.

3. 템플릿에서 함수 호출의 장점

• 템플릿 코드 간결 유지: 함수 호출을 사용하면 템플릿 코드를 간결하고 읽기 쉽게 유지할 수 있습니다.
• 데이터 처리 및 UI 제어 분리: 데이터 처리 및 UI 제어 로직을 템플릿 코드와 분리하여 코드 유지 관리를 용이하게 합니다.
• 재사용성 향상: 함수는 여러 곳에서 재사용될 수 있어 코드 재사용성을 높일 수 있습니다.

4. 템플릿에서 함수 호출 시 주의 사항

• 함수 호출 시 인자 전달: 함수 호출 시 필요한 인자를 제대로 전달해야 합니다.
• 함수 반환값 처리: 함수가 값을 반환하는 경우, 템플릿에서 해당 값을 적절하게 처리해야 합니다.
• 성능 최적화: 반복적으로 호출되는 함수는 성능 최적화를 위해 신중하게 작성해야 합니다.