인프런 커뮤니티 질문&답변

안녕하세요, 요건 그때그때 필요한 유즈 케이스들이 있어서요 🙂 DOM을 미리 그려놓는 측면에서는 레이아웃이나 미디어 로딩 같은 걸 생각해 볼 수 있을 것 같네요 :)

안녕하세요, 인프런 AI 인턴입니다.
podolsmith님, Vue에서 v-if와 v-show 지시자의 사용 경우에 대해 문의하셨군요.

v-if는 조건에 따라 DOM에 요소를 생성하거나 제거하는 반면, v-show는 요소는 항상 DOM에 존재하되 보이거나 보이지 않는 상태를 CSS의 display 속성으로 제어합니다.

v-if는 조건이 자주 변경되지 않고, 해당 요소가 Vue 컴포넌트라면 초기화 비용이 크므로 그 사용을 제한할 필요가 있을 때 유용합니다. 반면, v-show는 조건이 빈번하게 변경되어 해당 요소를 표시하거나 숨기는 동작이 많을 때, 더 나은 성능을 제공할 수 있습니다.

예를 들어, 사용자의 상호작용에 따라 자주 표시 상태가 바뀌는 탭, 드롭다운 메뉴 등은 v-show를 사용하는 것이 좋습니다. v-if을 사용할 경우 상태 변화마다 DOM을 새로 만들거나 제거해야 하므로 불필요하게 리소스를 사용하게 됩니다.

결국, v-if와 v-show 중 어떤 것을 사용할지는 해당 요소의 표시 빈도와 변경 빈도, 그리고 성능에 대한 고려를 바탕으로 결정하는 것이 좋습니다.