템플릿에서 조건식 vs Computed

 

endDt가 있을 때는 

2024-10-28 ~ 2024-10-30

없을 때는 

2024-10-28 

이라고 써주고 싶을 땐...

 

---

1. 템플릿에서 조건식 사용 

<span class="value">{{ startDT }} {{ endDt ? " ~ " + endDt : "" }}</span>

endDt가 있으면 startDT ~ endDt 형태로, 없으면 startDT만 보여줌. 조건식을 템플릿에 직접 작성하여 필요한 값을 표시함

 

장점

• 직관적: 바로 값이 어떻게 변하는지 보임
• 간단한 조건 처리에 적합: 조건이 복잡하지 않은 경우 편리

단점

• 가독성: 조건식이 복잡해질 경우 템플릿이 지저분해질 수 있음
• 복잡한 로직에 불리함: 로직이 길어지면 관리가 어려워질 수 있음.

---

2. Computed 속성 사용

computed: {
  formattedDate() {
    return this.endDt ? `${this.startDT} ~ ${this.endDt}` : this.startDT;
  }
}

formattedDate라는 computed 속성을 만들어 사용할 수도 있음. 템플릿에서는 {{ formattedDate }}를 씀

 

장점

• 가독성: 템플릿이 깔끔해지고, 조건 로직이 컴포넌트 내에서 관리
• 재사용성: 같은 로직을 여러 곳에서 사용할 경우 computed 속성이 유리
• 성능: computed 속성은 의존성이 변경될 때만 다시 계산되므로, 조건이 자주 바뀌지 않는다면 성능상 이점이 있음

단점

• 구현 복잡성: 단순히 한 번 사용되는 경우, computed 속성을 추가하는 것이 오히려 코드량을 늘릴 수 있음

 

---

결론

• 조건이 간단하고 한 번만 사용된다면 템플릿에서 처리해도 충분
• 조건이 복잡하거나 여러 곳에서 재사용된다면 computed 속성에 넣는 것이 좋음
  
  

 

 

 

나는 템플릿 읽다가 computed 갔다가 나머지 템플릿 읽는 게 싫어서

템플릿에 조건식 씀