[문제해결] Vue - AG-Grid-Vue Cell Renderer 조건문

---

AG-Grid-Vue

ag-grid-vue 를 사용하다가 Cell Renderer를 사용하여 직접만든 컴포넌트를 넣고싶었다. Column의 조건에 따라 Cell Renderer를 나타나게 하고싶었지만 되지 않았다.

기존

cellRenderer: (params:any) => {
	return params.data.mapngYn === 'N' ? M3SCR_DetailButton : null;
},

cellRenderer에 params.data.mapngYn이 Y , N 에 따라 M3SCR_DetailButton 이 나타나게 하고싶었다.

에러

ERROR
Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at CellComp.afterCellRendererCreated (webpack://lcms/./node_modules/ag-grid-community/dist/ag-grid-community.auto.esm.js?:32472:21)
    at eval (webpack://lcms/./node_modules/ag-grid-community/dist/ag-grid-community.auto.esm.js?:10471:25)
    at new AgPromise (webpack://lcms/./node_modules/ag-grid-community/dist/ag-grid-community.auto.esm.js?:10446:9)
    at AgPromise.then (webpack://lcms/./node_modules/ag-grid-community/dist/ag-grid-community.auto.esm.js?:10469:16)
    at createCellRendererFunc (webpack://lcms/./node_modules/ag-grid-community/dist/ag-grid-community.auto.esm.js?:32435:34)
    at AnimationFrameService.executeFrame (webpack://lcms/./node_modules/ag-grid-community/dist/ag-grid-community.auto.esm.js?:38412:21)

이 오류는 JavaScript에서 발생하는 것으로, appendChild 메소드를 사용할 때 발생합니다. 오류 메시지는 "Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'"로, 첫 번째 매개변수의 타입이 'Node' 유형이어야 하는데 그렇지 않다는 것을 나타냅니다.

간단히 말하면, appendChild 메소드에 전달된 첫 번째 인자가 올바른 'Node' 유형이 아니기 때문에 오류가 발생한 것입니다. 이 메소드는 보통 DOM(Document Object Model)에서 사용되며, 부모 노드에 자식 노드를 추가할 때 쓰입니다.

---

해결

cellRenderer: (params:any) => {
  if (params.data.mapngYn === 'Y') {
    const container = document.createElement('div');
    const componentOptions = {
      render: () => h(M3SCR_DetailButton),
    };
    const DynamicComponent = createApp(componentOptions);
    DynamicComponent.mount(container);
    	return container;
  } else {
    return null;
  }
},

• 조건 확인 params.data.mapngYn 값이 'Y'인지 확인한다.
• 조건에 따른 셀 렌더링: 만약 mapngYn이 'Y'이면 새로운 div 요소를 생성한다.
• Vue.js의 createApp을 사용하여 동적 컴포넌트를 생성한다. 이 컴포넌트는 M3SCR_DetailButton 컴포넌트를 렌더링하는 역할을 한다.
• 동적으로 생성된 컴포넌트를 이전에 생성한 div 요소에 마운트한다.
• 마운트된 div 요소를 반환한다.
• 만약 mapngYn이 'Y'가 아니면 null을 반환한다.

---

render: () => h(M3SCR_DetailButton) ?

코드에서 사용된 h 함수는 Vue.js의 가상 돔(Virtual DOM)을 생성하는 함수입니다. 가상 돔은 실제 DOM과 동일한 구조를 가지지만, 실제로는 메모리 상에 존재하며 변경된 부분만 실제 DOM에 적용하여 성능을 향상시키는 기술입니다.

import 방식

import { createApp, h } from 'vue';

---