ExtJS6 스물일곱번째강의 - ExtJS 6 데이터 바인딩 및 MVVM 구조이해( Understanding ExtJS 6 data binding and MVVM structure)
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다.
(YOUTUBE 채널 구독해주세요!!)
데이터 바인딩 (Data Binding)
ViewModel과 데이터 바인딩은 ExtJS 의 강력한 것 중 일부입니다.
같이 사용하게 되면 데이터와 UI 간의 비즈니스 로직이 끊기지 않는 연결관계를 만들 수 있습니다.
바인딩이 가능한 CONFIG 설정은 bind 라는 속성내에 GET/SET을 지원하는 CONFIG 를 정의 후
value부분에 중괄호 - "{value}" 와같이 정의를 해주어야 합니다.
MVVM 구조 이해하기
우리는 기존에 app.js 라는 파일내에 모든 컴포넌트 + 기능들을 기술하여 화면에
출력 하고 기능을 동작시켜 보았습니다.
하지만, 페이지가 늘어나고, 기능역시 추가되게 되면, 한페이지 내에서 모든것을
작성하게되면 비효율적입니다.
위와 같이 그리드 한페이지만 작성을 하는 경우라 하더라도 무려 30줄 가량의 공간을 차지합니다.
그래서 초기에는 MVC 구조를 잡고 MODEL / VIEW / CONTROLLER 구분을
잡아주었지만, 버전이 업되면서 MVVM 구조까지 지원을 하게 되었습니다.
둘다 사용해본 제입장에서는 MVVM 구조로 개발하는것이 가독성이 뛰어난거 같았습니다.
MVVM 개발은 아래의 순서로 진행을 하시면 될거 같습니다.
① View페이지를 미리 define 구문을 이용하여 미리 정의를 해놓는 것입니다.
② 이벤트 리스너 및 핸들러 관련 function은 Controller 클래스에 정의
③ 데이터 바인딩관련 작업을 위해서는 ModelView 클래스에 정의
※ 만약 데이터 바인딩이 필요 없을 경우,
이전에 했던것과 동일하게 진행하면 됩니다.
그리고 현재장에서는 다루지 않았지만, 데이터바인딩을 하지 않더라도
Store 역시 별도로 define을 이용하여 이용이 가능합니다.
각각의 역할에 대해서 대략적으로 이미지로 분리를 시켜보았습니다.
어떻게 나누는지에 대해서는 각자의 판단이 필요합니다.
아래는 분리시킨 샘플코드를 각 페이지마다 작성한 코드입니다.
MVVM + Data Bind 관련코드
app.js
SampleGrid.js
SampleGridController.js
SampleGridViewModel.js
영상과 상단코드를 분석하여 페이지 및 기능개발을 조금 더 가독성있게 개발을 하셨으면 좋겠습니다.
