Menu 컴포넌트 메모리 누수 때려잡기

ExtJS Menu 메모리 누수 잡기

안녕하세요, 스빠시빠 입니다. (욕 아님)

회사 프로젝트로 ExtJS를 새로 배워서 사용하고 있는데, 웹에도 메모리 누수가 있다는 걸 처음 알았다! 😃 완전 씐나!

C++을 떠나 웹으로 오면서 메모리와는 이제 안-녕 하는줄 알았는데... 어서와 메모리 누수는 처음이지?

Ext.menu.Menu 컴포넌트는 hide 될 시 자동으로 해당 DOM을 제거 하지 않는다.

그러므로 개발자가 직접 제거해줘야 한다.

모든 hide 콜백에서 destroy를 해준다. 😃

hide() {
  this.destroy()  
}

컨트롤 C+V! 컨트롤 C+V! 컨트롤 C+V!

조금 더 좋은 방법 안내

Ext.define('Override.menu.Menu', {
  override: 'Ext.menu.Menu',
  constructor: function () {
    this.callParent(arguments);
    this.on({
      hide: {
        fn: 'onHideEx',
        delay: 50,
        scope: this
      }
      });
    },

    onHideEx(menu) {
      menu.destroy();
      },
});

메뉴를 override 해서 hide 시 자체적으로 제거하도록 수정.
근데, 선생님 왜 delay가 있나요?

바로 destroy를 해버리면 메뉴 하위 item이 click 이벤트를 못받아요