프론트엔드 개발 · 기초
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는 어떤 프레임워크이며, 프론트엔드 개발에서 어떤 장점을 제공하는지 설명해 주세요.
- Vue 애플리케이션의 가장 기본적인 단위인 Vue 인스턴스는 어떻게 생성하며, 주요 옵션(data, methods 등)은 무엇이 있는지 설명해 주세요.
- Vue.js에서 `v-bind`와 `v-model` 디렉티브는 각각 어떤 용도로 사용되며, 둘의 주요 차이점은 무엇인지 설명해 주세요.
- Vue.js에서 배열 데이터를 기반으로 여러 개의 요소를 반복적으로 렌더링할 때 `v-for` 디렉티브를 어떻게 사용하는지 설명해 주세요. 이때 `key` 속성의 중요성도 함께 언급해 주세요.
- Vue.js에서 사용자 인터랙션(클릭, 입력 등)을 처리하기 위해 `v-on` 디렉티브를 어떻게 사용하는지 설명해 주세요. 이벤트 수식어(event modifiers)의 역할도 함께 설명해 주세요.
- Vue.js에서 컴포넌트 기반 개발의 이점은 무엇이며, 하나의 컴포넌트는 일반적으로 어떤 구조(template, script, style)로 이루어져 있는지 설명해 주세요.