간단한 앱 예시
빈 HTML 파일 하나로 시작해 카운터, 드롭다운, 태그 검색을 차례로 만들고, 스코프 사이에 값을 내려 주는 법까지 봅니다. 끝나면 hyper-scope 의 뼈대를 거의 다 써 본 셈입니다.
컴퓨터 어딘가에 i-love-hyper-scope.html 같은 이름으로 빈 파일을 만들고, 아래 내용을 넣은 뒤 브라우저로 엽니다.
화면에 "hyper-scope 를 좋아합니다" 가 보이면 준비가 끝났습니다. 스크립트는 head 에 둡니다. 화면을 갈아 끼우는 도구가 body 안의 스크립트를 다시 실행해도 런타임은 하나여야 하기 때문입니다.
카운터 만들기
가장 작은 예제입니다. 상태를 두고, 이벤트를 듣고, 화면에 비추는 세 가지가 다 들어 있습니다.
상태 두기
h-scope 가 붙은 요소부터 그 안쪽 전체가 하나의 스코프입니다. 값으로 적은 객체가 그 스코프의 상태가 됩니다. 여기서는 count 하나입니다.
이벤트 듣기
@click 은 h-on:click 을 줄인 것입니다. 누를 때마다 뒤의 식 count++ 이 실행됩니다. 식 안에서는 스코프의 값을 이름 그대로 읽고 씁니다.
바뀌면 따라 고치기
h-text 는 요소의 글자를 식의 결과로 채웁니다. count 가 바뀌면 hyper-scope 가 알아서 다시 채웁니다. 다시 그리라고 따로 시킬 일이 없습니다.
드롭다운 만들기
이번에는 누르면 열리고, 바깥을 누르면 닫히는 드롭다운입니다.
보이고 숨기기
h-show 는 식이 참일 때만 요소를 보여 줍니다. 요소는 DOM 에 그대로 있고 display 만 바뀝니다. 아예 넣고 빼고 싶으면 <template h-if> 를 씁니다.
속성을 하나 만들기
h-outside 는 처음부터 들어 있는 속성이 아닙니다. 이 사이트가 플러그인으로 등록한 것입니다. 필요한 속성은 이렇게 몇 줄로 만듭니다. 돌려준 함수는 요소가 빠질 때 불려서 뒷정리를 합니다.
검색 입력 만들기
조금 더 긴 예제입니다. HTML 태그를 이름으로 찾는 검색입니다. 입력한 글자로 목록을 걸러 보여 줍니다.
글자에 값 끼우기
{{ tag.name }} 처럼 글자 사이에 값을 끼우려면 그 글자를 품은 요소에 h-text-inline 을 붙입니다. 붙인 요소의 바로 아래 글자만 읽습니다. 안쪽 요소의 글자까지 읽으려면 값에 선택자를 적습니다. 위 예제는 <li h-text-inline="code"> 라서 <li> 의 글자와 그 안 <code> 의 글자를 읽습니다. 없으면 {{ }} 는 글자 그대로 남습니다. 서버가 랜더링한 화면에는 사용자가 쓴 글이 섞여 있어서, 표시한 요소에서만 읽습니다. h-text 같은 속성은 h-text-inline 없이도 동작합니다. h-text-inline →
여러 줄로 적기
h-scope 의 값은 평범한 자바스크립트 객체라서 여러 줄로 나눠 적어도 됩니다. 더 길어지면 스코프 바로 아래의 <script type="scope"> 로 옮기고, 거기서 return 한 것이 스코프에 합쳐집니다.
입력과 묶기
h-model 은 입력과 값을 서로 맞춥니다. 글자를 치면 search 가 바뀌고, search 를 바꾸면 입력이 바뀝니다. 서버가 value 를 랜더링해 보냈다면 그 값이 처음 값이 됩니다.
계산해서 얻는 값
get found() 는 자바스크립트의 getter 입니다. 함수처럼 부르지 않고 값처럼 읽으며, 안에서 읽은 tags 나 search 가 바뀌면 이 값을 쓰는 자리도 따라 바뀝니다.
객체에 getter 를 적지 않고 속성으로 둘 수도 있습니다. h-computed:이름="식" 은 그 요소와 안쪽에서 읽는 계산값을 만듭니다. 읽기 전용이고, 속성 이름은 소문자가 되므로 total-price 로 적고 totalPrice 로 읽습니다.
되풀이하기
h-for 는 목록의 항목마다 안쪽을 한 번씩 그립니다. :key 를 주면 목록이 바뀔 때 같은 항목의 요소를 다시 씁니다.
자손에게 내려 주기
스코프 안에 스코프를 두면, 안쪽은 바깥쪽의 값을 보지 못합니다. h-scope 는 경계입니다. 바로 바깥 한 단계라면 h-inherit="이름" 으로 이어 받으면 됩니다. 하지만 안쪽이 바깥쪽의 변수 이름을 알고 있어야 하므로, 사이가 멀어질수록 깨지기 쉽습니다.
h-provide 와 h-inject 는 그 사이에 이름표를 하나 두는 방법입니다. 조상은 "이 이름표로 이것을 내놓는다" 고 하고, 자손은 "이 이름표의 것을 받는다" 고 합니다. 서로의 변수 이름은 몰라도 됩니다.
내놓기
h-provide:theme="theme" 는 그 요소부터 안쪽에 theme 이라는 이름표로 값을 내려 줍니다. 식은 요소가 놓인 자리에서 풉니다. 그래서 같은 요소에 h-scope 가 있어도 그 스코프보다 먼저 서고, 그 스코프가 바로 받아 쓸 수 있습니다. h-scope 가 없는 요소에 달아도 됩니다. 몇 단계 아래든 받을 수 있습니다.
스코프가 스크립트에서 자기 값을 내놓을 때는 $provide('이름표', 값) 을 씁니다(함수 스코프에서는 도구의 provide).
받기
h-inject="theme" 은 DOM 을 거슬러 올라가며 가장 가까운 조상이 내놓은 것을 찾아 그 이름으로 읽습니다. 여러 개는 띄어 적습니다: h-inject="theme cart". 받은 이름은 읽기 전용이라 거기에 다른 값을 넣지는 못하고(넣으면 콘솔 에러), 받은 객체의 속(theme.color)은 바꿀 수 있습니다. 값 자체를 갈아야 하면 $emit 으로 내놓은 쪽에 요청합니다.
다른 이름으로 받거나 아무도 내놓지 않았을 때의 값을 정하려면 식에서 $inject 를 씁니다: h-scope="{ look: $inject('theme', { color: 'gray' }) }".
바뀌면 함께 바뀝니다
내려가는 것은 복사본이 아니라 같은 객체입니다. 조상이 theme.color 를 바꾸면 받은 쪽 화면도 바뀌고, 자손이 받은 theme.color 를 바꿔도 조상 쪽이 바뀝니다. 그래서 숫자나 글자를 그대로 내놓지 말고 객체에 담아 내놓습니다. 값만 내놓으면 그 순간의 값이 한 번 건너갈 뿐입니다.
언제 쓰나
- 컴포넌트 안에서. 컴포넌트의 템플릿은 바깥 스코프를 보지 못합니다. 깊이 있는 컴포넌트가 바깥의 것을 받으려면 props 로 단계마다 넘기거나
inject로 한 번에 받습니다. - 나중에 끼워지는 조각에서. 서버에서 새로 받아 와 끼운 조각도, 끼워진 자리의 조상이 내놓은 것을 받습니다. 서버의 부분 템플릿은 "
cart를 받는다" 는 것만 알면 되고, 어느 화면에 끼워질지는 몰라도 됩니다. - 같은 조각을 여러 곳에서 쓸 때. 화면마다 조상의 변수 이름이 달라도 이름표만 같으면 됩니다.
모든 화면이 함께 보는 값이라면 플러그인의 provide 로 문서 전체에 내려 줍니다. 방문을 넘어 남습니다. h-provide 는 "이 구역 안에서만" 일 때 씁니다. 같은 이름표를 화면의 두 구역이 따로 내놓을 수 있고, 자손은 자기 쪽 조상의 것을 받습니다.
정리
여기까지 왔다면 다음 속성을 써 본 것입니다.
h-scope— 스코프와 상태h-on(@) — 이벤트h-text— 글자h-show— 보이고 숨기기h-model— 입력h-for— 되풀이