Toast Grid + Vue2 (+ composition API)

Toast Grid를 다른 프로젝트들에서 잘 사용하고 있었다.

새롭게 만드는 프로젝트에도 적용하고 있는데...

전체 체크를 할 때 마다 화면이 아예 멈춰버렸다.

처음엔 Grid 버전 문제라고 생각하고 버전을 변경했었다. (4.18.0 => 4.10.1)
신기하게도... 버전을 낮추니 잘 됐었다. (왤까...?)

그런데 또 같은 문제가 발생..
대충 넘어가면 안되겠다고 생각하고 차근차근 비교해봤다.

toast UI 에서 공식 제공되는 vue wrapper Library의 Grid.vue 코드는 아래와 같다.

이부분을 아래와 같이 변경해서 가지고 왔었는데..^^

setup(prop, context) {
  const state = reactive({
    ...,
  	puiGrid: {} as HTMLElement,
    gridInstance: {} as Grid | null,
  });
  onMounted(() => {
     const defaultOptions: OptGrid = {
       el: state.puiGrid,
       data: prop.value,
       columns: prop.columns,
       ...
     };
     const options = Object.assign(prop.options || {}, context.attrs,defaultOptions);
     state.gridInstance = new Grid(options);
     addEventListeners();
   });
  
  return {
    ...toRefs(state),
    ... 
 }
}

굉장히 자연스러웠는데.. 여기서 문제는..?
state.gridInstance
바로 이부분...

reactive를 사용하면 전달된 객체가 반응형으로 만들어진다. (객체 내부의 모든 중첩된 속성을 포함해서)

따라서 new Grid(options) 로 만들었던 객체와 reactive(state) 로 감싸진 결과 state.gridInstance는 다르다.

반응형이 필요 없는 객체에 대해서 왜 생각없이 state에 넣었는가..ㅠ..
결국 잘못 사용해서 내부 동작이 꼬인듯

setup(prop, context) {
  const state = reactive({
    ...,
  	puiGrid: {} as HTMLElement,
  });
  let gridInstance: Grid;
  onMounted(() => {
     const defaultOptions: OptGrid = {
       el: state.puiGrid,
       data: prop.value,
       columns: prop.columns,
       ...
     };
     const options = Object.assign(prop.options || {}, context.attrs,defaultOptions);
     gridInstance = new Grid(options);
     addEventListeners();
   });
  
  return {
    ...toRefs(state),
    ... 
 }

state에서 빼고 setup내부에서만 사용하도록 변경해줬더니 잘 동작한다............................

나쁜 습관으로 시간을 버렸다 ㅠ