첫 컴포넌트 만들기

컴포넌트는 함수다

루프킷에서 컴포넌트는 특별한 클래스나 데코레이터가 아니라, 마크업을 돌려주는 함수입니다. 이름은 관례상 대문자로 시작하지만 강제는 아닙니다. 중요한 것은 호출될 때마다 같은 입력에 같은 마크업을 돌려주는가 뿐입니다.

import { html } from 'loopkit';

export function Badge() {
  return html`<span class="badge">신규</span>`;
}

끼워 넣기

컴포넌트를 다른 컴포넌트 안에 쓰려면 템플릿 안에서 그냥 호출하면 됩니다. 별도의 등록 절차나 전역 컴포넌트 테이블이 없습니다.

function ProductRow() {
  return html`
    <li>
      <strong>무선 키보드</strong>
      ${Badge()}
    </li>
  `;
}

언제 파일을 나눌까

한 파일에 컴포넌트를 여러 개 두는 것은 전혀 문제가 되지 않습니다. 나눠야 할 때는 보통 셋 중 하나입니다. 다른 화면에서 다시 쓰게 되었을 때, 파일을 열 때마다 스크롤로 원하는 컴포넌트를 찾게 되었을 때, 그리고 테스트를 따로 붙이고 싶을 때입니다. 그 전에는 붙여 두는 편이 읽기 좋습니다.

// Badge.js
export function Badge() { … }

// ProductRow.js
import { Badge } from './Badge.js';