값을 두는 곳
h-scope 가 스코프를 엽니다. 서버가 준 값은 h-props 로 받아 $props 로 읽기만 합니다. h-state 는 스코프 호스트를 만들지 않고 그 요소 안쪽에 별도의 리액티브한 값 공간을 만듭니다 — 줄마다 자기 값을 둘 때 씁니다.
요소에 h-scope 를 적으면 거기서부터 스코프입니다. 그 안의 속성이 값과 화면을 묶습니다. 빌드 없이 스크립트 한 줄로 시작합니다.
표현은 Vue 그대로이고 프리픽스만 h- 입니다. 반응성은 Vue 의 핵심 라이브러리(@vue/reactivity)를 그대로 씁니다. 컴포넌트 파일도 빌드도 없이 마크업에 바로 적습니다.
값을 미리 적어 둘 필요가 없습니다. 서버가 랜더링해 보낸 입력값이 그대로 처음 값이 됩니다. 글자의 {{ }} 는 h-text-inline 을 붙인 요소의 바로 아래에서만 읽습니다. 여기서는 버튼입니다.
관련 속성 h-scope h-model :disabled h-text-inline
<div h-scope="{ count: 0 }">
<button @click="count++">+1</button>
<span h-text="count"></span>
</div>hyper-scope 는 서버가 랜더링한 화면에 동작을 얹는 도구입니다.
@click · :class · h-for 를 그대로 씁니다unsafe-eval 을 허용하지 않습니다 보안이 중요한 프로젝트는 이 구성이 허용되지 않을 수 있습니다화면은 서버가 랜더링하고, 브라우저는 거기에 동작만 얹습니다. 나중에 끼워진 조각도 스코프가 붙어 있으면 스스로 살아납니다. 외울 것은 속성 22개, 프로퍼티 12개, 함수 2개가 전부입니다.
Vue 나 Alpine 을 써 봤다면 아래 표와 예제 몇 개로 충분합니다. 속성 22개, 프로퍼티 12개, 함수 2개가 전부이고, 하나씩의 설명은 문서에 있습니다.
| 하는 일 | Vue | Alpine | hyper-scope |
|---|---|---|---|
| 값을 두는 곳 | data() · setup() | x-data | h-scope |
| 글자 | {{ }} · v-text | x-text | h-text · h-text-inline |
| 속성 · 이벤트 | :class · @click | :class · @click | :class · @click |
| 입력 | v-model | x-model | h-model |
| 조건 · 반복 | v-if · v-for | x-if · x-for | h-if · h-for |
| 보이고 숨기기 | v-show | x-show | h-show |
| 계산값 | computed | getter | h-computed · getter |
| 값이 바뀌면 할 일 | watchEffect | x-effect | h-effect |
| 값 하나를 지켜보기 | watch | $watch | 없습니다 |
| 요소 짚기 | ref | x-ref · $refs | h-ref · $refs |
| 위로 알리기 | $emit | $dispatch | $emit · $dispatch |
| 아래로 내려 주기 | provide · inject | 바깥 x-data 가 보임 | h-provide · h-inject |
| 서버 값 받기 | props | x-data 에 적기 | h-props (JSON) |
h-inherit · h-inject 로 적은 것만 받습니다.{{ }} 는 표시한 요소에서만 읽습니다. 서버가 랜더링한 사용자 글이 섞여 있어서, h-text-inline 을 붙인 요소의 글자만 읽습니다.h-scope 가 있어야 살아납니다. 문은 스코프와 컴포넌트 둘뿐입니다.h-scope 가 스코프를 엽니다. 서버가 준 값은 h-props 로 받아 $props 로 읽기만 합니다. h-state 는 스코프 호스트를 만들지 않고 그 요소 안쪽에 별도의 리액티브한 값 공간을 만듭니다 — 줄마다 자기 값을 둘 때 씁니다.
글자는 h-text, 글자 사이에 끼울 때는 h-text-inline 과 {{ }}. 속성은 :, 보이고 숨기기는 h-show, 넣고 빼기는 <template h-if>, 되풀이는 h-for 입니다.
h-model 이 입력과 값을 맞추고, @ 가 이벤트를 듣습니다. 수식어(.prevent · .trim)는 Vue 와 같습니다. 요소는 h-ref 로 이름 붙여 $refs 로 짚습니다.
내려 줄 것은 h-provide, 받을 것은 h-inject 로 적습니다. 받은 이름은 읽기 전용입니다. 받은 객체의 속은 바꿀 수 있고, 값 자체를 갈아야 하면 $emit 으로 준 쪽에 요청합니다.
h-computed:이름 은 그 요소 안쪽에서 읽는 계산값입니다. h-effect 는 읽은 값이 바뀔 때마다 다시 돕니다. 수식어를 붙이면 값이 아니라 때를 따릅니다 — .mounted · .unmounted · .sealed.
서버가 조각을 새로 보내도 h-keep 이 입력하던 값을 잇습니다. h-cloak 은 살아나기 전까지 숨기고, h-await 는 비동기 작업의 상태에 따라 보이며, h-pre 안쪽은 건드리지 않습니다.
함수는 둘입니다. start() 가 문서의 스코프를 살리고, plugin() 이 이름 · 속성 · 컴포넌트를 더합니다. 폼 검증 $v 와 turbo-frame 손잡이 $tf 도 플러그인입니다.