Backbonejs View 사이의 대화는 어떻게 할까? (1)

Backbonejs View를 구성 하다 보면 형제 View 사이에 커뮤니케이션을 어떻게 할 것 인가의 고민이 생긴다.

위와 같은 구성의 View가 있다고 해보자 Sidebar의 메뉴를 클릭 하면 우측 Main View가 어떻게 이벤트를 전달 받아 동작 하게 만들 것 인가의 대한 고민 이다.

(이하 Sidebar View는 A, Main View B라 약칭으로 표현)

이번 포스팅에서는 부모 View를 통해서 이벤트를 전달 하는 방식에 대해 알아보자

- Layout View에서 A와 B를 생성 하고 Layout View를 전달 한다.

- A에서는 B에게 전달할 이벤트를 Layout View를 통해서 전달 한다.

자바스크립트 구현은 아래와 같다:

var LayoutView = Backbone.View.extend({
    initialize: function() {
        this.mainView = new MainView({
            parentView: this
        });
        this.sidebarView = new SidebarView({
            parentView: this
        });
    }
});

var SidebarView = Backbone.View.extend({
    events: {
        'click': 'onClick'
    },
    initialize: function(options) {
        this.parentView = args.parentView;
    },
    onClick: function() {
        this.parentView.mainView.render();
    }
});

var MainView = Backbone.View.extend({
    initialize: function(options) {
        this.parentView = args.parentView;
    },
    render: function() {
        console.log('클릭이 발생 했어요!');
    }
});

위와 같은 경우의 장점은 부모 View는 각각의 형제 View에게 자신을 전달 하고, 형제를 호출 하기 위해 부모 View에 접근 하여 형제 View 객체의 함수를 바로 호출 하게 된다. 즉 부모 View 권한을 열어 줘서 쉽게 다른 View를 접근 하게 할 수 있다.

하지만 장점보다는 단점이 더 크다. 부모 View를 넘겨줬기 때문에 부모 View가 더러워질 위험이 커지게 된다.

단적으로 보기엔 A와 B를 접근이 쉬어 보이지만 만약 B의 자식 View인 C가 생겨 났을때에 Layout View를 부여 할지, B View를 부여 할지 고민을 하게 된다

A에선 C에게 이벤트를 전달 하기 위해서 약간의 Rule이 필요 할 것 같다. 

대전제: 자식 View는 바로 위 1촌 관계인 부모 View만 할당 받는다. 즉 여기서 C는 B를 부여 받는다. new CView({parentView: B});

A가 C에게 이벤트를 전달 하는 방식을 다시 정리 해보면 아래와 같다

A -> LayoutView -> B -> C -> 함수 호출 

뭔가.... 부자연스럽게 복잡 하다.

위 구성이 가지는 문제는 크게 2가지로 분류 할 수 있다.

1. 하위 뷰로 내려가거나 View layout의 depth가 깊어지면 깊어 질수록 이벤트를 전달하기에 어려워진다.

2. 여러 View들에게 이벤트를 전달 할때의 대한 문제가 발생하게 된다

만약 A가 B와 C에게 같은 메시지를 전달 하고 싶다면 어떻게 해야 할까 B와 C가아닌 D가 생긴다면 머리가 복잡해진다.

다음 포스팅에서는 좀 더 스마트한 방법을 공유 하고자 한다.