루프킷

값 끼워 넣기

html 태그 템플릿 안에서 ${}는 그 자리에 값을 놓겠다는 뜻입니다. 문자열, 숫자, 다른 템플릿, 템플릿의 배열까지 놓을 수 있습니다.

const name = '가온';
html`<p>${name}님, 안녕하세요</p>`;

값이 문자열이면 텍스트로 삽입됩니다. 마크업으로 해석되지 않으므로, 사용자 입력을 그대로 넣어도 스크립트가 실행되지 않습니다. 이것이 기본 동작이고, 예외를 두려면 명시적으로 unsafeHtml()을 써야 합니다.

접두사 한 글자로 대상이 갈립니다. 아무 접두사가 없으면 HTML 속성, .은 DOM 프로퍼티, @는 이벤트 리스너, ?는 있고 없음을 토글하는 불리언 속성입니다.

html`
  <input
    value=${draft}
    .valueAsNumber=${count}
    ?disabled=${isLocked}
    @input=${(e) => draft.set(e.target.value)}
  />
`;

주의

class와 style는 속성이라 문자열을 받습니다. 객체를 넘기면 [object Object]가 그대로 들어갑니다. 조건부 클래스는 템플릿 리터럴로 만들거나 classes() 도우미를 쓰세요.

템플릿은 값이므로 함수로 뽑아 두고 필요한 곳에서 부르면 됩니다. 반복되는 마크업을 줄일 때 컴포넌트까지 만들 필요는 없습니다.

const field = (label, input) => html`
  <label><span>${label}</span>${input}</label>
`;