chart update는 어떤 라이프 사이클 훅에 넣어야 하나요?

Question

외부차트라이브러리 섹션 강의를 듣고 질문을 드립니다. 작업 플로우 1. 각 차트 컴포넌트에서 emit으로 refresh 이벤트를 App.vue에 보내고, 2. 업데이트된 차트 데이터를 각 차트 컴포넌트에 props로 내려 보낸 후에,(여기까지는 강의대로 잘 됐습니다.) 3. Chart.js 라이브러리에서는 차트.update() 라는 메소드를 실행해줘야 업데이트된 데이터에 맞게 차트가 다시 그려지는데요. 저 3번에서 차트.update() 는 어느 라이프 사이클 훅에 넣어야 하는지 질문 드립니다. ps.  이미 비슷한 질문이 있었다면, 관련링크를 부탁드립니다.

captain · Answer

안녕하세요 성희님 좋은 질문이네요. 제가 알아보기 편하게 작업 플로우를 깔끔하게 정리해주셔서 감사합니다. 질의해주신 질문이 차트 라이브러리 갱신은 어떤 라이프 사이클에 해야 하느냐? 인 것 같은데요. 차트가 이미 그려진 상태에서 다시 갱신을 하시는 것이기 때문에 차트 컴포넌트를 통째로 삭제하지 않는 이상 다시 라이프사이클 훅을 이용할 순 없습니다. 따라서, 차트 컴포넌트에 내려주는 props 데이터가 바뀌었을 때 watch 메서드와 $nextTick API를 조합해서 차트를 갱신해보시면 좋을 것 같아요 :)

dimorinpk1710 · Answer

답변해주신 대로, watch 에서 변화된 props 데이터를 감지해서 차트.update()를 하니 원하는 결과가 나옵니다. 감사합니다. 건승하세요.^^