[Vue] input에서의 v-if와 v-show의 차이점과 활용

v-if와 v-show는 다음과 같은 차이점이 있다.

	v-if	v-show
표현	조건이 false이면 렌더링되지 않는다.	렌더링 된다. 하지만 style의 display : none;속성으로 보이지 않는다.
차이점	토글 비용이 높다.	초기 렌더링 비용이 높다.
사용	런타임 시 조건 변경이 잘 안될 때	조건 변경이 자주 될 때.

이정도 차이가 있다는 것은 알고 있었다.

하지만 프로젝트에서 input태그에 v-show를 사용해보면서 차이점을 확실히 깨닫게 되었다.

 

내가 사용했던 input태그는 radio버튼이었다.

 

특정 페이지 수 이상일 경우

위 사진과 같은 Pagination구현을 위해 특정 페이지 수 이상일 경우 "1 ... " 와 " ... 20 " 같이 맨 앞 페이지와 맨 뒷 페이지를 표현할 수 있도록 구현했다.

 

특정 페이지 수 미만일 경우

그리고 특정 페이지 수 미만일 경우에는 모든 페이지가 보여지도록 구현했다.(사진은 설명을 위해 임의로 경계값을 변경해 캡쳐했다)

 

이 때, 맨 앞 페이지와 맨 뒷 페이지를 나타내는 input 태그를 v-show로 구현했더니,

특정 페이지 수 미만일 경우의 제일 마지막 번호와 " ... 8 "와 같이 특정 페이지 수 이상일 경우의 맨 뒷 페이지를 나타내는 input 태그의 value가 겹치게 되었다.

 

따라서 같은 값을 가지는 두 개의 input태그 때문에 radio버튼이 작동되지 않는 것처럼 보이게 되었다.

(= display : none; 된 태그가 선택됨)

 

v-show에 input태그를 사용하면 display:none;속성만 적용되기 때문에 해당 값을 가진 input태그 자체는 살아있다.

<input
	v-if="false"
	type="radio"
	name="Name"
	value="value"
/>

<input
  	v-show="false"
	type="radio"
	name="Name"
	value="value"
/>

왜 한 번 눌렀을 때 클릭이 안되는건가... 하면서 엄청 삽질을 하다가 실습코치님의 힌트로 이런 실수를 했다는 것을 깨닫게 되었고 원인을 확실히 파악할 수 있었다.

 

---

kkan0615.github.io/youngjin.github.io/Vue-js-If%EC%99%80-Show/