[VueJS] Table이 변하지 않는다

글쓰게 된 계기

업무를 진행하다가 Table의 데이터가 변하지 않는 현상 발생...ㅠㅠ
빨리 해야하는데 왜 안되는거지?? 생각하다가 결론은 컴포넌트가 변경이 되지않는 문제였다..
분명 알고있는 내용인데도 급하니까 생각이 안나서 나중에 정리해놔야지! 싶어서 쓰게된 글!

Table의 데이터가 안바뀐다고?

change(row) {
  this.data = row;
}

데이터를 변경할 때, 이렇게하니 전~혀 변경되지 않았다. console에서 찍어보니까
data는 변경된거같은데, 화면에서 업데이트가 되지 않는 문제가 발생....ㅠㅠ

---

해결방법 1. this.$forceUpdate() 사용하기

처음에는 table component 에 리렌더링 문제라 생각해서 컴포넌트를 강제로 리렌더링해주는
$forceUpdate() 를 사용해봤다.

[stack overflow에서 찾은 사용예시]
https://stackoverflow.com/questions/32106155/can-you-force-vue-js-to-reload-re-render

위의 링크를 참고하여 컴포넌트에 key 를 지정해주고, $forceUpdate() 를 사용했는데, '근본적인 이유를 다른데 비용이 많이 드는 리렌더링을 해주는 것이 맞는가..?' 라는 의문이 들어 vue js 문서를 찬찬히 읽어보며 다른 해결방안을 찾았다!

하지만 위의 방법은 쓰레기값을 제거할 때 사용할만한 해결방안은 맞으니까 기록한다..!

---

해결방법 2. VueJS > 배열 변경 감지 메서드로 처리하기

Vue는 push(), pop(), shift(), unshift(), splice(), sort(), reverse()는 배열의 변경 메서드가 호출 되는 것을 감지해 업데이트를 한다. 이런 수정 메서드를 사용하면 리렌더링으로 처리하지 않고, DOM 엘리먼트 재사용을 최대화하여 효율적으로 처리한다고 한다.

그래서 테이블의 ROW를 추가하고 삭제할 때 pop(), push() 와 같은 수정 메서드를 사용하여 해결했고, 혹시 또 다른 방법이 있는지 확인해보았다.

---

(번외) 해결방법 3. vue 라이프사이클 사용하기

mount 된 후 데이터가 변경되면 가상 DOM 리렌더링과 패치가 이뤄지기 전에 호출되는 beforeUpdate 와 패치 후 호출되는 updated 에 변경 내용을 구현하면 쓰레기값을 제거하고 데이터는 변경된다.

---

마지막으로 읽어보면 좋을만한 거

[reactivity 관련 공식 문서 내용]
https://v2.ko.vuejs.org/v2/guide/reactivity.html

이건 나중에 또 글을 적어봐야겠다!

---