[Stencil]컴포넌트 구성 셋

출처 : PIXABAY

 

컴포넌트 사용

class 값과 text를 인자로 받는 간단한 컴포넌트를 생성해봅시다.

인자 값을 받기 위해 스텐실에 내장된 Prop를 임포트해주고,

tdList 클래스 내부에 text와 class를 문자열로 선언해줍니다.

render되는 마크업에 Prop로 선언된 요소를 this를 붙여 배치 시킵니다.

import { Component,h,Prop } from '@stencil/core';

@Component({
  tag: 'td-list',
  styleUrl: './td-list.css',
  shadow: true
})
export class tdList {
@Prop() text: string ;
@Prop() class: string ;
 render() {
    return (
      <Host>
        <div class={this.class}>
            {this.text} 
            <slot><slot>
        </div>
      </Host>
    );
  }
}

 

이전에 만든 컴퍼넌트를 사용하기 위해 다음과 같이 작성합니다.

<td-list text="list" class="list">test</td-list>

 

다음과 같이 렌더를 예상할 수 있습니다.

여기서 클래스 값과 text는 인자값으로 받았지만 test는 slot에 할당되어 배치 됩니다.

<div class="list">list test</div>

 

Slot의 사용

slot에 이름을 지정하여 사용한다면 여러 slot을 사용할 수 있습니다.

<slot name="firstname"></slot>
<slot name="lastname"></slot>

 

아래와 같이 순서가 뒤바뀌게 작성하더라도

<span slot="lastname">최</span>
<span slot="fisrtname">못난</span>

 

콤퍼넌트에 정의된 순서로 할당되게 됩니다.

<span>못난</span><span>최</span>