[Vue.js] 탭 기능 이용시 라이브러리 작동 오류

페이지의 탭 메뉴를 구현하는 중에 에러가 떴다. 에러의 원인을 해결하여 정리해보자.

탭기능 중 한 곳은 스와이퍼, 다른 한쪽은 스크롤 매직 라이브러리를 사용한 상황이다.

mounted() {
	this.careerInfoFixed();
  	this.fetchCareerSwiper();
},

1. 2탭인 상태에서 1탭을 다녀왔다가 다시 2탭을 돌아오면 스크롤 fixed 가 작동하지 않음
2. 1탭인 상태에서 2탭을 다녀왔다가 다시 1탭을 돌아오면 swiper 가 작동하지 않음
3. document 에서 해당 요소를 찾을 수 없다는 에러가 발생함
   
   

원인

1. v-if 문법을 통해 탭 기능을 제작했는데, v-if는 조건에 따라 컴포넌트가 실제로 제거되고 생성되기 때문에 mounted 혹은 created 때 첫 렌더링 시 발생하는 옵션에서 딱 한번만 실행됬던 라이브러리가 컴포넌트가 재생성 될 때 다시 기능을 하지 않는 것이다.
2. 탭이나 팝업 형태로 swiper를 사용한다면 페이지를 로딩한 직후에는 슬라이더가 노출되지 않고 어떤 동작을 한 이후에 나타나게 된다. 즉 처음에 보이지 않는 display: none 상태인 요소에 swiper를 사용하게 되면 에러가 발생하곤 한다.
3. document 에서 찾을 수 없다는 에러 또한 v-if 문법은 아예 제거되고 생성되기 때문에 v-if 조건이 비활성화되어 제거된 상태의 탭에서는 돔 요소들을 찾을 수 없기 때문이다.
   
   

해결:

1. 활성화된 탭이 변화되었을 때 해당 라이브러리가 다시 실행되게끔 하면 된다. 또한 careerInfoFixed() 라는 라이브러리 기능은 2번째 탭에서만 발동하기 때문에 val1 === "2" 조건을 걸어준다.

   nextTick으로 감싼 뒤 callback을 통해 DOM을 조작하게 되면 vue에서 데이터 갱신 후 UI까지 완료한 뒤에 nextTick에 있는 함수를 최종적으로 수행

    mounted() {
      this.fetchCareerSwiper();
    },
    
    watch: {
    	"tab.active"(val1) {
    	  if (val1 === "2") {
    	    this.$nextTick(() => {
    	      this.careerInfoFixed();
    	    });
    	  }
    	},
    }

2. observer 매개변수를 사용해야 한다. observer: true, observeParents: true로 해당 요소와 부모 요소를 감지하여 DOM에 변화가 있으면 swiper를 초기화 시키면 해결된다.

   참고 출처: https://lpla.tistory.com/129

3. v-show 를 사용하면 단순히 css 의 display 속성만 변경(none) 되는 것이기 때문에 돔요소들을 찾을 수 없다는 에러를 해결할 수 있다. (이때 template 이 아닌 div 에 적용해야됨)

   여러개의 자잘한 화면을 자주 보였다 안보였다 하는 기능에서는 일일히 렌더링을 하는 v-if 보단 단순히 css 속성만 바뀌는 v-show 가 더 적합할 수 있다.