컴포넌트 합성과 슬롯

자리를 비워 두기

컴포넌트는 값을 받듯 마크업도 받을 수 있습니다. 카드의 테두리와 여백만 책임지고, 안에 무엇이 들어갈지는 부르는 쪽이 정하게 하는 식입니다.

function Panel({ title, children }) {
  return html`
    <section class="panel">
      <h2>${title}</h2>
      ${children}
    </section>
  `;
}

Panel({ title: '배포 기록', children: html`<ul>…</ul>` });

자리를 여러 개 두고 싶으면 그냥 필드를 늘리면 됩니다. 머리말과 꼬리말을 따로 받는 식이죠. 특별한 슬롯 문법을 배울 필요가 없습니다.

옵션이 늘어날 때

showHeader, compact, variant 같은 불리언이 셋을 넘어가면, 대개 컴포넌트 하나가 서로 다른 두 컴포넌트를 억지로 겸하고 있다는 신호입니다. 이럴 때는 옵션을 더 붙이는 대신 공통 부분을 안쪽 컴포넌트로 뽑고 바깥을 두 개로 나누는 편이 읽기도 고치기도 쉽습니다.

조건 분기 줄이기

부모가 자식의 상황을 다 알고 분기하는 구조는 금방 커집니다. 자식이 자기 상황을 스스로 그리게 하고, 부모는 자리만 내주는 방향으로 옮기면 분기가 사라집니다.