v-if="item" vs v-if="!!item"

v-if="item"

• 동작: item의 truthy/falsy 상태만으로 렌더링 결정.
• 장점: 간결하고 직관적.
• 적합한 경우:
  • 값이 null, undefined, false, 0, '' 같은 falsy일 때 렌더링을 막고 싶을 때.
  • 일반적인 조건부 렌더링에 적합.

---

 

v-if="!!item"

• 동작: !!로 값을 명시적으로 Boolean으로 변환 후 렌더링 결정.
• 장점: 타입 변환 의도가 명확함.
• 적합한 경우:
  • item의 truthy/falsy가 헷갈릴 가능성이 있거나 명시적 Boolean 변환이 필요할 때.
  • 코드 읽는 사람에게 "Boolean 타입으로 변환함"을 명확히 전달하고 싶을 때.

---

 

---

• 대부분은 v-if="item" 사용.
• 명시적 Boolean 변환이 필요하면 v-if="!!item" 사용.