썬더에서는 크게 두가지 방식을 통해서 컴포넌트를 렌더링할 수 있습니다.

각 컴포넌트에 대한 자세한 내용들은 컴포넌트 레퍼런스를 참고해주세요.

HTML 속성을 통한 방식


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"와 같은 방식을 통해서 설정될 수 있습니다.