썬더에서는 크게 두가지 방식을 통해서 컴포넌트를 렌더링할 수 있습니다.
각 컴포넌트에 대한 자세한 내용들은 컴포넌트 레퍼런스를 참고해주세요.
HTML 속성을 통해 렌더링하는 방식은 크게 3가지의 문법을 지원하고 있습니다.
예를 들어 상품 목록(product-list
) 컴포넌트를 렌더링 하는 경우 다음과 같은 세가지 마크업을 사용할 수 있습니다.
<!--
#1. 마크업 컨테이너 렌더링:
- data-thunder-render="{컴포넌트명}"
- 상품 목록이 <div> 안에 렌더링됩니다.
-->
<div data-thunder-render="product-list"></div>
<!--
#2. 클릭시 특정 타겟에 렌더링
- data-thunder-render="{컴포넌트명}"
- data-thunder-render-target="{타겟셀렉터}"
- 버튼 클릭시 #target-element에 상품 목록이 렌더링됩니다.
-->
<div id="target-element"></div>
<button
data-thunder-render="product-list"
data-thunder-render-target="#target-element">
다른 곳에 렌더링하기
</button>
<!--
#3. 클릭시 오버레이 열기
- data-thunder-open="{컴포넌트명}"
- 버튼 클릭시 오버레이 창이 열립니다.
-->
<button data-thunder-open="product-list">
오버레이 열기
</button>
또한 렌더링하려는 컴포넌트들에 대한 옵션을 data-*
속성으로 설정할 수 있습니다.
예를 들어 상품 목록(product-list
) 컴포넌트의 설정은 다음과 같이 작성할 수 있습니다.
<!-- 상품 목록 1페이지의 상품 12개를 상품 요약 텍스트 없이 렌더링 -->
<div
data-thunder-render="product-list"
data-page="1"
data-limit="12"
data-show-summary="false"></div>
위 예시와 같이 각 컴포넌트의 옵션들은 data-{{option}}="value"
와 같은 방식을 통해서 설정될 수 있습니다.