UI 에 데이터 바인딩하기

바인딩(Binding) 은 데이터를 UI 컴포넌트에 연결하는 것입니다. 바인딩을 하면 데이터가 화면에 나타나고, 데이터가 바뀌면 화면도 스스로 갱신됩니다. Layerz 에서 디자인이 살아 움직이게 되는 핵심 방법입니다.

컴포넌트에 값 바인딩하기

컴포넌트를 선택하고 Inspector 에서 표시할 데이터를 연결합니다.

• Label 의 텍스트를 title 필드에 바인딩하면 그 값을 보여 줍니다.
• Toggle 의 상태를 done 필드에 바인딩하면 데이터에 따라 켜짐/꺼짐이 정해집니다.
• Image 를 image 타입 데이터에 바인딩할 수 있습니다.

Text Field, Slider, Toggle 같은 입력 컴포넌트는 양방향으로 바인딩됩니다. 데이터가 화면에 표시될 뿐 아니라, 사용자가 입력하거나 조작한 값이 다시 데이터에 반영됩니다.

배열을 List 에 바인딩하기

가장 강력한 바인딩은 배열을 List 에 연결하는 것입니다.

1. List 를 선택하고 배열 데이터(예: Todo 배열)를 바인딩합니다.
2. 셀이 배열 항목 수만큼 자동으로 반복됩니다.
3. 셀 안의 컴포넌트(Label, Toggle 등)를 각 항목의 필드에 바인딩합니다.

편집 화면에서는 배열 개수를 미리 보여 주는 미러 셀이 함께 표시되어, 실제 데이터가 어떻게 채워질지 바로 확인할 수 있습니다.

데이터 소스

바인딩할 데이터는 세 가지 범위에서 가져올 수 있습니다.

• Project — 프로젝트 전체에서 공유하는 데이터
• Page — 현재 화면에 속한 데이터
• Cell — List 셀 하나하나에 해당하는 항목 데이터