[Vue.js] v-if & v-show 조건부 렌더링의 차이점

화면에서 데이터 변경 사항이 바로 반영되지 않는 이슈 해결하기,,

 

 

우선 이슈에 대해 간단히 설명하자면 화면에서 사용 안함 버튼을 클릭하면 바로 톱니바퀴 모양의 버튼이 사용자가 클릭할 수 없도록 Disabled 처리된 버튼으로 바뀌어야 되는데 사용 안함 버튼을 클릭해도 바뀌지 않는 현상이 발생하였다.

이 문제는 테스트 중 사용 안함 버튼을 클릭 후 페이지를 새로고침 하면 정상적으로 변경 사항이 반영되었다. 

 

값에 따라 Disabled 버튼이 보여지는 기능인 Vue.js의 조건부 렌더링 기능인 v-if를 사용 하여 개발되어 있었기 때문에 렌더링 관련 문제인 것으로 파악되어 Vue.js의 조건부 렌더링에 대해 찾아보다 v-show라는 것도 있다는 것을 알게되어 v-if 대신 v-show를 적용하여 쉽게 해결할 수 있었다.

 

 

v-if와 v-show에 대해 알아보자

https://www.linkedin.com/pulse/when-use-v-if-v-show-vuetips-1-julyemerson-leonizio

 

v-if:

조건부로 블록을 렌더링하는 데 사용된다. 블록은 표현식이 true 값을 반환하는 경우에만 렌더링된다. 이 외에 v-else-if, v-else 등의 엘리먼트도 사용할 수 있다.

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  A/B/C 아님
</div>

 

v-show:

v-if와 사용법은 대체로 동일하지만 차이점은 v-show가 있는 엘리먼트는 항상 렌더링되어 DOM에 남아있는 것이다.

<h1 v-show="ok">안녕!</h1>

 

 

v-if vs v-show

• v-if는 "실제" 조건부 렌더링이다. 조건부 블록이 전환될 경우, 블록 내 이벤트 리스너와 자식 컴포넌트가 제거되거나 재생성된다.
• v-if는 게으르므로(lazy), 초기 조건이 false면 아무 작업도 수행하지 않는다. 조건부 블록은 조건이 true가 될 때까지 렌더링되지 않는다..
• 이에 비해 v-show는 훨씬 간단하다. 엘리먼트는 CSS 기반으로 전환 되므로, 초기 조건과 관계없이 항상 렌더링 된다.
• 일반적으로 v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높다. 따라서 매우 자주 전환해야 하는 경우 v-show를, 실행 중에 조건이 변경되지 않는 경우 v-if를 사용하는 것이 좋다.

처음 렌더링 후 값이 변경되지 않음. -> v-if
실행 중 지속적으로 값이 변경되며 조건에 따른 빠른 전환이 필요함. -> v-show

 

 

 

결론적으로 처음 렌더링 후 실행중 전환이 자주 필요한 경우에는 v-if 보다 v-show가 더 적합하다.

조건부 렌더링 기능을 어디에 어떻게 사용할지에 따라 적절한 것을 선택하여 사용하면 좋을 것 같다..!

 

 

 

 

reference. https://ko.vuejs.org/guide/essentials/conditional