v-if v-show 차이

v-if와 v-show는 둘 다 Vue.js에서 조건부 렌더링을 구현하는 데 사용되는 디렉티브입니다.

둘의 차이점에 대해 알아보았습니다.

 

- v-if, v-show 차이점

1. 렌더링 방식

v-if: 조건이 true일 때만 해당 엘리먼트가 렌더링됩니다. 조건이 false인 경우 해당 엘리먼트는 DOM에서 제거됩니다.
v-show: 조건이 true일 때 해당 엘리먼트는 CSS의 display: none을 이용하여 숨깁니다. 조건이 false인 경우에도 해당 엘리먼트는 DOM에 그대로 유지됩니다.

2. 비용

v-if: 초기 조건이 거짓인 경우 렌더링하지 않습니다.

하지만 엘리먼트가 추가/제거될 때 마다 렌더링과 패치 과정이 발생하기 때문에 토글 비용이 높습니다.
v-show: CSS 기반 토글으로 초기 조건에 관계없이 렌더링되므로 초기 렌더링 비용은 더 높을 수 있습니다.

조건이 변경되더라도 렌더링과 패치 과정이 발생하지 않기 때문에 조건 변경이 자주 발생하는 경우에 성능상 이점을 가질 수 있습니다.

 

3. 토글 속도

v-if: 조건이 바뀔 때마다 엘리먼트가 추가되거나 제거되므로, 토글 시 엘리먼트가 다시 생성되어 초기화되는 속도가 조금 더 느릴 수 있습니다.
v-show: 엘리먼트가 항상 DOM에 존재하므로, 토글 시 엘리먼트의 상태를 유지한 채로 숨기거나 보여주므로서 토글 속도가 더 빠를 수 있습니다.

 

- 요약

1. v-if는 주석 v-show는 display:none

2. 자주 변경되는 조건에는 v-show

조건 변경이 드물거나 조건에 따라 컴포넌트가 완전히 다시 초기화되는 것이 필요한 경우에는 v-if

 

*v-if을 사용할 경우 mount, unmount가 발생합니다.

mount안에 emiter을 등록 하면 중복 등록되는 문제가 발생하여 unmount할 때 해제해줘야 합니다.

https://sumni.tistory.com/195

 

* 컴포넌트가 초기화 되어야 하는 경우(v-if를 사용해야 하는 경우) 예시

보통 store에서 데이터를 관리하고 그 데이터에 따라 컴포넌트 조작이 이루어져서

대부분 컴포넌트 초기화가 필요없을 거 같다.

 

1. 사용자 로그인/로그아웃
로그인한 사용자와 로그인하지 않은 사용자에 따라 다른 정보를 표시하는 컴포넌트가 있다면, 로그인/로그아웃 시 해당 컴포넌트를 초기화하고 다시 렌더링해야 할 수 있습니다.

2. 언어 변경
언어 선택에 따라 컴포넌트 내의 텍스트 또는 레이아웃이 변경되어야 할 수 있습니다. 언어 변경 시 해당 컴포넌트의 초기화가 필요하며, 이는 컴포넌트가 다시 렌더링되는 것을 의미합니다.

3. 동적 라우팅
라우터를 통해 다른 경로로 이동하면 해당 경로에 따라 컴포넌트가 변경됩니다. 동적 라우팅 시 이전 컴포넌트는 제거되고 새로운 컴포넌트가 초기화되어야 합니다.

4. 서버에서 받은 데이터 형식 변경
컴포넌트가 서버에서 데이터를 받아 렌더링하는 경우, 서버에서 데이터의 형식이 변경될 수 있습니다. 이 경우 데이터 형식이 변경되는 상황에 따라 컴포넌트의 초기화가 필요할 수 있습니다.

5. 컴포넌트 설정 변경
컴포넌트 내부에서 사용자 설정을 반영하는 경우, 사용자가 설정을 변경할 때마다 해당 컴포넌트를 초기화하고 변경된 설정에 따라 렌더링해야 할 수 있습니다.