Marionette.js 의 메모리관리

Marionette.js 의 메모리관리

Marionette는 보일러플레이트 코드를 줄이는것외에도 고급 메모리 관리기능을 지원한다.

Marionette의 메모리관리에 공부하기전에 우선 고스트뷰에대해 이해가 필요하다.

고스트뷰(Ghost View) 란?

모델애 이벤트를 bind 하였을때 등록된 뷰를 이벤트의 unbind 없이 제거하였을시 모델은 뷰의 참조를 가지고 있기때문에

자바스크립트의 가바지 컬렉터는 메모리에서 뷰를 해제하지않는다. 이를 고스트뷰 라 한다.

고스트뷰에 대한 이해가 얼핏이라도 되었는가? 이해가 안된다면 우선 소스를 보고 이해하자.

- 모델 객체 생성

/**
*   공통 모델 객체 생성
*/
var Person = Backbone.Model.extend({
    defaults: {
        firstName: '이',
        lastName: '상훈',
        email: 'devsh@nara.co.kr'
    }
});
var Sanghoon = new Person({
    firstName: '이',
    lastName: '상훈',
    email: 'devsh@nara.co.kr'
});

- 고스트뷰 테스트

/**
*      고스트뷰 가 발생하는 코드
*/
var ZombieView = Backbone.View.extend({
    template: '#my-view-template',
    initialize: function() {
        //  모델의 change 이벤트에 이 뷰의 render를 바인딩
        this.model.on('change', this.render, this);
    },
    render: function() {
        //  문제 발생을 보여주기 위해서 alert 메시지 출력
        alert('We`re rendering the view');
    }
});
 
//  첫 번째 뷰 인스턴스를 만든다.
var zombieView = new ZombieView({
    model: Sanghoon
});
 
//  두 번째 뷰 인스턴스를 만들고
//  동일한 변수명에 이를 저장한다.
zombieView = new ZombieView({
    model:Sanghoon
});
 
Sanghoon.set('email', 'digimon.1740@gmail.com');
 

위 코드를 실행하게 되면 "We`re rendering the view" 경고창이 두번뜨는것을 볼수 있다.

이를 수정하기 위해선 뷰가 수행되다가 닫힐 준비가됬다면 stopListening을 호출하여 이벤트를 unbind 해야한다

- stopListening 를 사용하여 이벤트 unbind

/**
*     stopListening 을 호출하여 고스트뷰를 제거
* */
var ZombieView = Backbone.View.extend({
    template: '#my-view-template',
    initialize: function() {
        //  모델의 change 이벤트에 이 뷰의 render를 바인딩
        this.listenTo(this.model, 'change', this.render);
    },
    close: function() {
        //   이 뷰가 리스닝하고 있는 이벤트를 바인딩 해제하자.
        this.stopListening();
    },
    render: function() {
        //  문제 발생을 보여주기 위해서 alert 메시지 출력
        alert('We`re rendering the view');
    }
});
 
//  첫 번째 뷰 인스턴스를 만든다.
var zombieView = new ZombieView({
    model: Sanghoon
});
 
zombieView.close(); // 더이상 수행할 필요가 없을때 
 
//  두 번째 뷰 인스턴스를 만들고
//  동일한 변수명에 이를 저장한다.
zombieView = new ZombieView({
    model:Sanghoon
});
 
Sanghoon.set('email', 'digimon.1740@gmail.com');

위 코드에서 model 이벤트의 bind 는 listenTo , unbind 는 stopListening 를 내부적으로 포함한 close가 사용되였다.

이를 Marionette 를 이용하면 아래와 같은 코드가 된다.

- Marionette를 사용

var ZombieView = Marionette.ItemView.extend({
    template: '#my-view-template',
 
    initialize: function () {
        //  뷰를 렌더링하기 위해 모델 변경을 바인딩한다.
        this.listenTo(this.model, 'change', this.render);
    },
    render: function () {
        //  alert을 통해 좀비 뷰의 문제점을 보여줄 것이다.
        alert('We`re rendering the view');
    }
});
 
//  첫 번째 뷰 인스턴스를 만든다.
var zombieView = new ZombieView({
    model: Sanghoon
});
 
zombieView.close(); //close 를 marionette에서 이미 정의하였다.
 
//  두 번째 뷰 인스턴스를 만들고
//  동일한 변수명에 이를 저장한다.
zombieView = new ZombieView({
    model: Sanghoon
});
 
Sanghoon.set('email', 'digimon.1740@gmail.com');

Marionette를 사용한 코드를 보면 close를 우리가 구현해 주지 않아도 내부적으로 구현하고있다는것을 알 수있다.

- Marrionette 내부의 close 메서드

_.extend(Marionette.Controller.prototype, Backbone.Events, {
  close: function(){
    this.stopListening();
    var args = Array.prototype.slice.call(arguments);
    this.triggerMethod.apply(this, ["close"].concat(args));
    this.off();
  }

이와 같이 내부적으로 이미 구현되어있기때문에 Marionette를 사용하는 개발자 입장에서는 close를 일일히 구현할 필요가 없다.

하지만 Marionette.Region을 사용하면 close메서드 마저도 Marionette가 알아서 호출해준다.

즉 Life Cycle을 관리해준다.

다음 주제에서 Marionette의 Life Cycle을 관리하는 객체인 Marionette.Region 을 살펴보자.