[Vue] Component Force Rerendering 하기 (강제로 rerender)

vue 개발을 하다가 data의 값이 잘 바꼈는데

컴포넌트 rerendering이 잘안돼서 그대로 이상한 값이 남아 있는 경우가 있었다.

 

그래서 찾아보니 좋은 stackOverFlow를 발견..

강제로 rerendering을 시켜주고 싶었다!

 

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

Can you force Vue.js to reload/re-render?

 

 

---

이중에 어떤 방법을 할까하다가

 

처음엔 당연히

this.$forceUpdate()를 쓰려고 했지만 잘안돼서.. 그치만 다시 찬찬히 읽어보니 방법이 생각났지만

여기 나온 방식중에서 가장 Best way라고 나온  key를 이용하는 방식을 써서 해결하였다.

 

그럼 forceUpdate와 Key를 이용해서 강제 rerendering하는 것을 알아보자 

(https://michaelnthiessen.com/force-re-render/ 다음을 해석하였습니다. 잘쓰여져있네여)

 

---

1. forceUpdate();

이것은 vue에서 공식적으로 제공해주는 방식이다. (https://vuejs.org/v2/api/#vm-forceUpdate)

 

보통은 Vue에서 data의 변화를 감지하는데 이것을 보통 reactive 하다고 말합니다. 

그런데 아시다시피 Vue의 reactivity 시스템은 모든 변화를 감지하지 못합니다..(언제그러는지는 정확하게 모르겠으나 개발하다보면 왕왕 있습니다..)

 

그래서 변화를 감지하지 못할때 강제 리렌더링을 해줍니다.

 

forceUpdate를 하기위해서는두가지 방법이 있는데 , Global하게 forceUpdate 하는 것과component 단위로 forceUpdate 하는방법

 

단순하게 생각해도 Global한 방식은 잘안쓸거 같군요..

// Globally
import Vue from 'vue';
Vue.forceUpdate();

// Using the component instance
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();  // Notice we have to use a $ here
      // ...
    }
  }
}

 

 

2. key 이용

 

key를 이용 하려면 Vue에서 제공하는 key에 대해서 알아야 하는데

 

Vue에서 key는 각 특정 component에 특정 값을 매핑해 두는데 이게 key라고 볼 수 있다.

그래서, key가 동일하면 component가 변하지 않지만

key가 변하면 Vue는 예전 component 를 지우고 새로운 component를 만듭니다.

 

 

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

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

그래서 다음과같이 자식 component에 key를 props로 내려주고

forceRerender라는 method에 key값을 변경해주도록 해주면

 

강제 Rerendering이 필요할때 forceRerender() method를 호출해주면

Vue에서 이전 component 를 지우고 새 component를 그려줍니다.

 

저도 이방법으로 쓰레기값이 남아있는 문제를 해결하였습니다!

 

굳굳!