Vue.js에서 조건부 렌더링

Vue.js에서 조건부 렌더링을 처리하는 두 가지 주요 방법은 v-if와 v-show 지시자를 사용하는 것입니다. 이 두 지시자는 유사하게 보일 수 있지만, 내부적으로 작동하는 방식과 사용 케이스에서 차이가 있습니다.

v-if

v-if는 조건이 참(true)일 때에만 엘리먼트를 DOM에 렌더링합니다. 조건이 거짓(false)인 경우, 엘리먼트는 전혀 렌더링되지 않으므로 해당 엘리먼트와 관련된 이벤트 리스너나 자식 컴포넌트들도 초기화되지 않습니다.

• 사용 예시:
• <div v-if="isVisible">이 텍스트는 isVisible이 true일 때만 보입니다.</div>
• 장점: 조건이 거짓일 때는 엘리먼트가 DOM에서 제거되므로 리소스를 아낄 수 있습니다.
• 단점: 조건이 자주 바뀔 때마다 엘리먼트를 처음부터 다시 생성하고 파기해야 하므로 성능에 영향을 줄 수 있습니다.

v-show

v-show는 엘리먼트를 항상 DOM에 렌더링하되, 조건에 따라 CSS의 display 속성을 통해 보이거나 숨깁니다. 조건이 거짓이더라도 엘리먼트는 DOM에 남아 있지만, 사용자에게는 보이지 않습니다.

• 사용 예시:
• <div v-show="isVisible">이 텍스트는 isVisible에 따라 보이거나 숨겨집니다.</div>
• 장점: 엘리먼트의 조건이 자주 바뀔 때 유용하며, 엘리먼트 상태가 보존되므로 성능 저하 없이 빠르게 표시 상태를 전환할 수 있습니다.
• 단점: DOM에 계속 남아 있기 때문에 조건이 거의 변하지 않고 대부분 숨겨져 있어야 하는 경우에는 불필요하게 리소스를 차지할 수 있습니다.

언제 무엇을 사용해야 할까?

• v-if는 다음과 같은 경우에 적합:
  • 조건이 거의 변하지 않을 때
  • 조건에 따라 다른 컴포넌트를 표시해야 할 때
  • 렌더링해야 하는 조건적인 내용이 많을 때
• v-show는 다음과 같은 경우에 적합:
  • 조건이 자주 변할 때
  • 초기 렌더링 비용을 줄이고 싶을 때
  • 같은 위치에서 여러 엘리먼트를 빠르게 토글해야 할 때