루프킷

목록 그리기

배열을 템플릿 배열로 바꿔 그대로 꽂으면 됩니다. 별도 반복 구문이 없습니다.

const items = [
  { id: 'a1', name: '무선 키보드' },
  { id: 'a2', name: '기계식 스위치' },
];

html`<ul>${items.map((it) => html`<li>${it.name}</li>`)}</ul>`;

목록이 자주 바뀐다면 keyed()로 각 항목에 안정적인 키를 붙이세요. 키가 있으면 런타임이 항목을 다시 만들지 않고 자리만 옮깁니다. 입력 포커스나 애니메이션 상태가 유지되는지가 여기서 갈립니다.

import { keyed } from 'loopkit';

html`<ul>${items.map((it) => keyed(it.id, html`<li>${it.name}</li>`))}</ul>`;

주의

배열 인덱스를 키로 쓰면 정렬이나 중간 삭제가 일어날 때 키가 서로 밀립니다. 서버가 준 식별자처럼 항목에 붙어 다니는 값을 쓰세요.

삼항 연산자와 &&를 그대로 씁니다. 다만 &&의 왼쪽이 0이면 숫자 0이 화면에 찍히므로, 개수를 조건으로 쓸 때는 불리언으로 바꿔 주는 편이 안전합니다.

html`
  ${items.length > 0
    ? html`<ul>…</ul>`
    : html`<p class="empty">아직 담긴 항목이 없습니다.</p>`}
`;