패스잇
프론트엔드 개발 · 기초

Vue.js에서 조건부 렌더링을 위해 사용되는 `v-if`와 `v-show` 디렉티브의 차이점을 설명하고, 각각 어떤 상황에 더 적합한지 예시를 들어 설명해 주세요.

힌트 · `v-if`는 조건에 따라 DOM 요소를 추가/제거하고, `v-show`는 CSS `display` 속성을 토글하여 요소를 숨기거나 보이게 합니다. 전환 빈도에 따라 선택합니다.

DOM렌더링초기 렌더링CSS display성능

모범답안

"Vue.js에서 v-if와 v-show는 조건부 렌더링을 위한 디렉티브입니다. 가장 큰 차이점은 v-if는 조건이 거짓일 경우 DOM 요소를 아예 렌더링하지 않는 반면, v-show는 항상 DOM에 존재하며 CSS의 display 속성을 none으로 설정하여 숨깁니다.

따라서, 조건이 자주 변경되지 않고 초기 렌더링 비용이 중요할 때는 v-if가 더 적합합니다. 예를 들어, 사용자 권한에 따라 특정 섹션을 보여줄지 말지 결정하는 경우처럼, 권한이 자주 바뀌지 않는다면 v-if를 사용하는 것이 좋습니다.

반대로, 조건이 자주 변경되어 토글되는 빈도가 높다면 v-show가 더 효율적입니다. 예를 들어, 탭 메뉴에서 현재 선택된 탭의 내용만 보여주는 경우처럼, 탭 전환이 빈번하게 일어난다면 v-show를 사용하는 것이 성능상 유리합니다."

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.

함께 보는 Vue.js / Nuxt 면접 질문

← Vue.js / Nuxt 면접 질문 전체 보기