뷰는 컴포넌트입니다. UI 트리의 노드로서 자체 레이아웃, 동작, 스타일을 가집니다. 이 장에서는 뷰를 어떻게 선언하고, 로직에 연결하고, 조합하고, 재사용하는지 다룹니다.view.tree를 처음 접한다면, TypeScript에서 view.tree로가 같은 컴포넌트를 손으로 쓴 클래스와 트리, 두 가지로 만들어 보이고 트리가 컴파일되는 코드까지 보여줍니다. 아래 문법이 줄임 표기가 아니라 새로운 언어처럼 느껴진다면 그 페이지를 먼저 읽으세요.
컴포넌트 $my_card 는 my/card/ 에 있으며 최대 세 개의 파일로 기술되고, 각 파일은 명확한 역할을 가집니다.card.view.tree — 컴포넌트가 무엇인지: 구조와 기본 바인딩.card.view.ts — 어떻게 동작하는지: TypeScript 메서드, 반응형 상태.card.view.css.ts — 어떻게 보이는지: 컴파일러가 검사하는 타입 붙은 스타일.구조, 동작, 스타일을 분리한 것은 의도적입니다. 각 파일은 작고 읽기 쉬운 상태로 유지되며, 레이아웃이 로직과 뒤엉키지 않습니다.셋 중 그 자체로 필수인 것은 없습니다. card.view.tree를 빼고 클래스를 namespace $에 바로 쓰면 구조는 평범한 메서드가 되고 컴포넌트는 그대로 동작합니다. 이 장의 나머지가 트리를 쓰는 이유는, 배관을 대신 만들어 줬을 때 구조가 바로 그런 모습이기 때문입니다.
view.tree 는 구조를 선언적으로 기술합니다. 들여쓰기가 곧 중첩이며, 닫는 태그가 없습니다.1$my_card$mol_view2 sub /3<= Title $mol_view4 sub /<= title \5<= Body $mol_view6 sub /<= text \$my_card$mol_view — 당신의 컴포넌트는 기반 클래스 $mol_view 를 상속합니다.sub/ — 자식 목록.<=Title$mol_view — 이름 붙은 서브뷰로, TypeScript 에서 this.Title() 로 접근할 수 있습니다.<=title \ — 기본 원시 문자열 값을 가진 바인딩 가능한 프로퍼티 (\ 는 원시 문자열의 시작).대문자로 시작하는 이름(Title, Body)은 모두 접근, 오버라이드, 스타일링할 수 있는 실제 프로퍼티가 됩니다. 소문자 바인딩(title, text)은 모두 .view.ts 에서 계산할 수 있는 값이 됩니다.
두 연산자가 프로퍼티를 그 출처에 연결합니다.<=단방향: 자식이 소유자로부터 값을 읽습니다.<=>양방향: 값이 양쪽 방향으로 흐릅니다. 입력에 사용합니다.1$my_form$mol_view2 sub /3<= Field $mol_string4 value?<=> text?\여기서 입력의 value 와 소유자의 text 는 자동으로 동기화됩니다. 필드에 입력하면 text 가 갱신되고, 코드에서 text 를 설정하면 필드가 이를 반영합니다.
