강제로 리렌더링 시키기

vuelayers 라이브러리 사용도중 data가 변경되었지만 반응형으로 리렌더링 되지 않는 문제가 발생했다.

비슷한 로직이 다른곳에서는 잘 작동 됐는데, 한 곳에서만 작동되지 않아 분명 라이브러리의 문제라고 확신한다.

(vuelayers 라이브러리에 대한 불만이 아주 많아진다... vue2에 멈춰있고 유지보수도 안된다 -_-)

 

 

방법1. key속성

컴포넌트에 key를 붙여 리렌더링이 필요한 시점에 key를 업데이트 하기

v-for에서 key를 붙이는 이유는 실제 dom tree와 가상 dom tree 간의 변화를 key값만을 활용해

빠르게 캐치하기 위해서다.

이런 특성을 이용해 key를 변화시켜 리렌더링 시키는 방법이다.

(이게 강제 리렌더링 시키기 위한 베스트 방법이라 한다.)

<template>
   <component-to-re-render :key="componentKey" />
</template>

<script>
 export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
 }
</script>

 

 

방법2. vue 내장 메서드 - this.$forceUpdate()

forceUpdate()를 사용하면 Vue 인스턴스를 강제로 리렌더링 시킨다.

<script>
export default {
   methods: {
     reRender(){
        this.$forceUpdate()
     }
   }
}
</script>

 

 ※ react - 리액트도 강제 리렌더링 시키는 내장메서드가 있다.

component.forceUpdate(callback);
forceUpdate를 호출하면 컴포넌트의 render() 메소드가 다시 호출되어 리렌더링 된다

 

지양해야 하는 방법

1. 전체 페이지를 다시 로드하는 법

2. v-if로 data 바꿔서 리렌더링 하기 : created 단계부터 컴포넌트로 새로 읽기때문에

 

 

---

https://v2.ko.vuejs.org/v2/api#vm-forceUpdate

https://blog.logrocket.com/how-when-to-force-react-component-re-render/

https://stackoverflow.com/questions/32106155/can-you-force-vue-js-to-reload-re-render