[Vue.js] v-if & v-show 변경(update)되지 않는 버그 해결하기

v-if 또는 v-show로 지정한 변수의 값을 변경해도 화면에서 조건부 렌더링이 정상적으로 반영되지 않는 문제가 종종 발생한다.. 

 

Vue.js 렌더링 : https://velog.io/@ganu

 

다양한 원인 및 해결 방법

Vue에서 렌더링 버그에는 다양한 원인이 있을 수 있으니 아래의 4가지 방법을 확인하자.

 

1. Html과 Vue에서 같은 Vue객체를 바라보고 있는지 확인

Vue.js를 활용하는 다양한 방식이 있지만 보통 Html, JSP와 같은 화면에 데이터를 바인딩하여 처리한다.

데이터 바인딩이 정상적으로 이루어지려면 당연하게도 Html<->Vue.js가  같은 데이터 객체를 바라보고 있어야 하는데 종종 Html에서 Vue 객체를 잘못 바라보고 있는 경우가 있다.

<h1 v-if="SearchVue.flag">Hello World</h1>

위와 같이 사용하고자 하는 변수를 가지고 있는 Vue 객체를 정확하게 선언해주자.

 

 

2. DOM 비동기 업데이트 문제

Vue는 DOM을 비동기로 업데이트 하는데 그렇기 때문에 DOM 업데이트가 되지 않은 상태에서 코드가 실행되어 버리면 정상적으로 Vue가 변경되지 않을 수 있다. 

해결 방법: $nextTick(() => { ... })으로 데이터가 변경된 후 실행될 코드를 묶으면 DOM의 업데이트가 완료된 후 실행할 것을 보장한다.

                 (DOM 업데이트가 완료된 후에 콜백 함수를 실행하도록 예약하는 역할)

vueForm.someMethod = function() {     
	this.someData = 'new value';     
    // someData가 변경되었으므로 DOM 업데이트가 필요함     
    vueForm.$nextTick(() => {         
    	// 여기서 DOM이 완전히 업데이트된 상태에서 추가 작업을 수행 가능         
        console.log('DOM이 업데이트되었습니다.');     
    }); 
};

 

특징:

1. DOM 업데이트 보장:

• $nextTick 사용 시: 코드는 DOM 업데이트가 완전히 끝난 후에 실행되므로, DOM과 관련된 작업이 최신 상태에서 실행된다. 예를 들어, 요소의 크기, 위치, 클래스 변경 등을 확인하거나 조작할 때 문제가 없다.
• $nextTick 사용하지 않을 시: 상태가 변경된 후 즉시 코드가 실행되지만, 이 시점에 DOM이 아직 업데이트되지 않았을 수 있다. 이로 인해 코드가 예상대로 동작하지 않을 수 있다.

2. 비동기 작업 처리:

• $nextTick 사용 시: Vue의 비동기 업데이트 프로세스가 끝난 후에 작업이 실행되므로, 비동기적으로 일어나는 DOM 업데이트에 맞춰 동기화된 작업을 수행할 수 있다.
• $nextTick 사용하지 않을 시: Vue가 아직 DOM을 업데이트하기 전에 작업이 실행될 수 있다. 이로 인해 비동기 작업의 순서가 꼬일 수 있다.

3. 퍼포먼스 영향:

• $nextTick 사용 시: $nextTick 내부의 코드는 DOM 업데이트가 완료된 후 실행되기 때문에 약간의 지연이 발생할 수 있다. 하지만 일반적인 경우 이 지연은 매우 짧고, 사용자에게는 거의 느껴지지 않는다.
• $nextTick 사용하지 않을 시: 즉시 실행되므로 지연이 없지만, 이로 인해 DOM 상태가 예상과 다를 수 있다.

4. 사용 사례에 따른 차이:

• $nextTick 사용 시: DOM 상태가 최신으로 유지된 후에 작업이 필요할 때 필수적이다. 예를 들어, 컴포넌트가 보이기/숨기기 될 때 요소의 위치나 크기를 계산해야 하는 경우, $nextTick은 이러한 계산이 정확하게 이루어지도록 보장한다.
• $nextTick 사용하지 않을 시: 데이터 변경 후 즉시 처리할 필요가 있을 때 적합하다. 예를 들어, 단순히 데이터 로직을 처리하고 DOM 상태에 의존하지 않는 작업이 있을 때는 굳이 $nextTick을 사용할 필요가 없다.

5. 코드 가독성 및 유지보수:

• $nextTick 사용 시: 코드가 명시적으로 DOM 업데이트 후 실행됨을 나타내므로, 유지보수 시 의도한 동작을 명확히 파악할 수 있다.
• $nextTick 사용하지 않을 시: 코드가 즉시 실행되므로 간단하지만, DOM 업데이트 시점에 대한 이해가 필요할 수 있다.

결론:

• $nextTick을 사용하면: DOM 업데이트 후에 정확한 작업을 실행할 수 있다는 장점이 있으며, 특히 DOM 상태에 의존하는 작업이 필요한 경우 매우 중요하다.
• 사용하지 않으면: 코드가 즉시 실행되지만, DOM이 아직 업데이트되지 않은 상태일 수 있어 그 상태에서 작업을 해야 하는 경우 문제가 발생할 수 있다.

 

 

3. $set 메서드로 vue의 반응성 시스템 동작시키기

 *배열의 데이터를 직접적으로 변경하는 경우

 

1. Vue의 반응성 시스템

Vue는 데이터의 변화를 감지하고 이를 기반으로 DOM을 업데이트한다. 하지만 배열이나 객체의 속성을 직접 수정할 경우, Vue가 이를 감지하지 못해 화면이 업데이트되지 않을 수 있다. 이런 경우 Vue의 set 메서드나 배열의 특정 메서드를 사용해 반응성을 유지하는 것이 중요하다.

2. 해결 방법
Vue의 $set 메서드 사용하기

$set 메서드를 사용하면 Vue의 반응성 시스템이 제대로 작동하여 데이터 변경이 감지된다. 이 메서드는 배열의 특정 인덱스에 값을 설정할 때 유용하다.

for (const [index, item] of matchList.entries()) {
  // vueForm.resultDatas[index].match = item; // 반응성 시스템이 감지하지 못할 수 있음
  vueForm.$set(vueForm.resultDatas[index], 'match', item); // 반응성 보장
}

 
 

4.Vue 개발자 도구 (Vue Devtools) 사용

위의 방법들을 다 시도해봤지만 해결되지 않았거나 Vue를 사용할 때 디버깅을 더욱 쉽고 편하게 하고 싶다면 Vue 개발자 도구를 사용하자.

• Vue Devtools는 Vue.js 애플리케이션을 디버깅하기 위한 브라우저 확장 프로그램이다. 이를 통해 Vue 인스턴스의 data, props, computed, methods 등의 상태를 실시간으로 확인하고 수정할 수 있다.
• Chrome이나 Firefox에서 Vue Devtools를 설치한 후, 브라우저의 개발자 도구(F12)를 열고 "Vue" 탭을 선택하면 Vue 애플리케이션의 상태를 쉽게 확인할 수 있다.

• Vue 브라우저 개발자 도구 확장 프로그램을 사용하면, Vue 앱의 컴포넌트 트리를 탐색하고 개별 컴포넌트의 상태를 검사하고 상태 관리 이벤트 및 프로필 성능을 추적할 수 있다.

Vue 브라우저 개발자 도구 확장 프로그램을 사용하면, Vue 앱의 컴포넌트 트리를 탐색하고 개별 컴포넌트의 상태를 검사하고 상태 관리 이벤트 및 프로필 성능을 추적할 수 있다.

 

공식 문서 :

Vue DevTools

 

 

 

 - 끝 -