[Nexacro] 2주차 - 3일차: 데이터 바인딩(Data Binding)

2주차 - 3일차: 데이터 바인딩(Data Binding)

학습 목표

• 데이터셋과 화면 컴포넌트를 연결하는 데이터 바인딩의 개념을 이해한다.
• 스튜디오의 속성 창을 통해 데이터 바인딩을 설정할 수 있다.

1. 데이터 바인딩이란?

"데이터셋의 데이터와 화면 컴포넌트의 속성을 하나로 묶는 것"

• 데이터 바인딩을 설정하면, 스크립트로 값을 일일이 주고받지 않아도 자동으로 데이터가 동기화됩니다.
• (데이터셋의 값 변경) ↔ (화면 컴포넌트의 값 변경) 이 양방향으로 이루어집니다.
• React에서 useState의 값이 바뀌면 화면이 리렌더링되는 것과 본질적으로 같습니다.

2. 바인딩 실습: 사용자 정보 폼 만들기

데이터셋의 특정 행을 사용자 정보 폼에 바인딩하여, 행이 바뀔 때마다 폼의 내용이 자동으로 바뀌는 예제를 만들어 봅시다.

1. 데이터셋 준비:

   • ds_user 데이터셋에 id, name, age, email 컬럼을 만듭니다.
   • 데이터셋 편집 창 하단의 Rows 탭에서 초기 데이터 2~3개를 직접 입력해 둡니다.

2. 화면 컴포넌트 배치:

   • Static과 Edit 컴포넌트를 조합하여 ID, 이름, 나이, 이메일을 입력받는 폼을 만듭니다.
   • Grid 컴포넌트 하나를 화면에 배치합니다. name을 grd_user로 설정합니다.
   • Button 컴포넌트 2개를 배치합니다. (btn_prev, btn_next)

3. 그리드(Grid)에 데이터셋 바인딩:

   • grd_user 컴포넌트를 선택하고 Properties 창에서 binddataset 속성을 ds_user로 설정합니다.
   • grd_user를 더블클릭하여 그리드 편집 창을 열고, 상단의 Recreate 버튼을 누르면 ds_user의 컬럼들이 그리드에 자동으로 채워집니다.

4. 입력 폼(Edit)에 데이터셋 바인딩:

   • ID를 표시할 Edit 컴포넌트를 선택합니다.
   • Properties 창에서 value 속성 옆의 ... 버튼을 클릭합니다.
   • Bind 탭에서 Dataset을 ds_user로, Column을 id로 선택하고 OK를 누릅니다.
   • 이름, 나이, 이메일 Edit 컴포넌트도 각각의 컬럼에 맞게 바인딩합니다.

5. 버튼 스크립트 작성:

   • 이전/다음 버튼으로 ds_user의 현재 행(rowposition)을 변경하는 스크립트를 작성합니다.

   // [이전] 버튼
   this.btn_prev_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
   {
       this.ds_user.previousRow(); // 이전 행으로 이동
   };
   
   // [다음] 버튼
   this.btn_next_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
   {
       this.ds_user.nextRow(); // 다음 행으로 이동
   };

4. 실행 및 확인

• F5로 실행하면, 그리드에는 ds_user의 전체 데이터가, 입력 폼에는 첫 번째 행의 데이터가 표시됩니다.
• 이전/다음 버튼을 누르면 ds_user의 rowposition이 바뀌면서, 입력 폼의 내용이 해당 행의 데이터로 자동으로 변경되는 것을 확인할 수 있습니다.
• 그리드의 특정 행을 클릭해도 입력 폼의 내용이 자동으로 변경됩니다.
• 반대로, 입력 폼의 값을 수정하면 그리드와 데이터셋의 값도 즉시 변경됩니다.

오늘의 과제

• 위 예제를 직접 따라 만들어보기
• "추가", "삭제" 버튼을 만들어 ds_user.addRow(), ds_user.deleteRow(this.ds_user.rowposition) 기능을 구현해보고, 그리드와 입력 폼이 어떻게 반응하는지 관찰하기