v-show 디렉티브
v-show는 Vue.js에서 조건부로 요소를 표시하거나 숨기는 디렉티브입니다. 특정 조건이 true일 경우 요소를 화면에 표시하고, 조건이 false일 경우 해당 요소를 DOM에서 제거하지 않고 숨깁니다. 요소의 display CSS 속성을 변경하여 화면에서 보이거나 숨기는 방식으로 작동합니다.
주요 특징:
- 조건에 따라 요소의 표시 여부를 결정:
v-show는true일 때 요소를 화면에 표시하고,false일 때 숨깁니다. - DOM 유지: 요소가 숨겨지더라도 DOM에서 제거되지 않고 계속 유지됩니다. 단지
display: none;스타일이 적용될 뿐입니다. - 빠른 토글: 요소가 DOM에서 제거되지 않기 때문에, 표시와 숨김을 빠르게 전환할 수 있어 성능상 유리합니다.
기본 사용:
<p v-show="isVisible">이 문장은 보일까요?</p>
위 코드에서 isVisible이 true일 경우 해당 문장은 화면에 표시됩니다. isVisible이 false일 경우, 문장은 숨겨지지만 여전히 DOM에는 존재하며 display: none; 스타일만 적용됩니다.
v-if와 v-show의 차이점:
v-show는 조건에 따라 요소의display속성만 변경하여 요소를 화면에서 숨기거나 보이게 합니다. 즉, DOM에서 요소가 유지되며 스타일 속성만 변경됩니다.v-if는 조건이false일 때 요소를 DOM에서 완전히 제거하고, 조건이true일 때 다시 DOM에 추가합니다. 따라서 DOM 요소를 자주 추가하거나 제거해야 하는 상황에서는 성능에 영향을 줄 수 있습니다.
| 디렉티브 | 작동 방식 | 성능 측면 |
|---|---|---|
v-show | display 속성을 토글하여 표시 | 요소가 DOM에서 유지되므로 빠른 전환 가능 |
v-if | 조건에 따라 DOM에서 추가/제거 | 요소를 자주 추가/제거하면 성능에 부담 |
사용 시기:
v-show는 요소를 자주 토글해야 할 때 유리합니다. 예를 들어, 클릭하여 보이거나 숨기는 UI 요소(드롭다운, 모달 등)에 사용하면 좋습니다. 요소가 DOM에서 유지되기 때문에 토글 속도가 빠릅니다.v-if는 요소가 드물게 토글될 경우에 적합합니다. 예를 들어, 페이지 로드 후 한 번만 표시되거나 조건에 따라 한번만 결정되는 UI에 사용할 때 적합합니다. DOM에서 완전히 제거되므로, 요소가 많이 추가되거나 삭제되는 경우 성능에 부담이 덜합니다.
예시 비교:
v-show사용:
<p v-show="isVisible">보일 때만 보입니다.</p>
isVisible이 false일 때 해당 요소는 숨겨지지만 DOM에는 남아 있습니다.
v-if사용:
<p v-if="isVisible">보일 때만 보입니다.</p>
isVisible이 false일 때 해당 요소는 DOM에서 완전히 제거됩니다.
요약
v-show는 요소를 숨기거나 보일 때 DOM에서 제거하지 않고display속성만 토글합니다.- 빠른 전환이 필요한 UI에서 유리하며,
v-if에 비해 요소가 계속 DOM에 남아있기 때문에 성능에 이점이 있습니다. - 자주 토글되지 않는 요소는
v-if*가 더 적합할 수 있으며, 자주 숨기고 표시해야 하는 요소에는v-show*가 더 적합합니다.
넙-죽