template tag(템플릿 태그)

lwc에서 자주 만나는 태그 중인 하나인 template 태그에 대해서 간략히 정리해보려고 합니다.

 

 

 

 

---

 

 

 

 

 

템플릿 태그는 루트 태그가 있는 유효한 HTML입니다.

컴포넌트가 렌더 될 때, 이 템플릿 태그는 <namespace-component-name> 식 같은 컴포넌트명으로 바뀝니다.

예를 들어, 템플릿 태그를 가진 myComponent.html  컴포넌트는 <c-my-component> 로 렌더됩니다. 

여기서, c는 기본 네임스페이스 속성입니다.

 

 

 

 

 

 

 

템플릿 태그로 활용할 수 있는 몇 가지 방법이 있습니다.

먼저, if:true|false={property} 지시어를 이용하여 데이터를 바인딩하거나 제거할 수 있으며

<!-- helloConditionalRendering.html -->
<template>
    <lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input>
            <template if:true={areDetailsVisible}>
                <div class="slds-m-vertical_medium">
                    These are the details!
                </div>
            </template>
        </div>
    </lightning-card>
</template>

 

 

 

 

 

 

DOM 요소에 삽입할 수 있습니다. (DOM 조작)

// helloConditionalRendering.js
import { LightningElement } from 'lwc';

export default class HelloConditionalRendering extends LightningElement {
    areDetailsVisible = false;

    handleChange(event) {
        this.areDetailsVisible = event.target.checked;
    }
}

 

 

 

 

 

 

 

 

 

 

둘째로, 자바스크립트 FOR문과 같은 기능을 할 수 있습니다. for:each나 iterator 지시어를 이용하여, 배열안에 있는 여러 값들에 대한 동작을 구현할 수 있습니다.

 

 

for:each문

<!-- helloForEach.html -->
<template>
    <lightning-card title="HelloForEach" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template for:each={contacts} for:item="contact">
                <li key={contact.Id}>
                    {contact.Name}, {contact.Title}
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

// helloForEach.js
import { LightningElement } from 'lwc';

export default class HelloForEach extends LightningElement {
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}

 

 

 

 

 

 

 

 

 

 

iterator문 

: 리스트 안에 있는 첫번째 또는 마지막 항목에 대한 동작도 가능합니다.

<template>
    <lightning-card title="HelloIterator" icon-name="custom:custom14">
        <ul class="slds-m-around_medium">
            <template iterator:it={contacts}>
                <li key={it.value.Id}>
                    <div if:true={it.first} class="list-first"></div>
                    {it.value.Name}, {it.value.Title}
                    <div if:true={it.last} class="list-last"></div>
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

.list-first {
    border-top: 1px solid black;
    padding-top: 5px;
}

.list-last {
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}

 

 

 

 

 

 

 

 

 

별도로, template 태그에서 DOM 조작 관련 코드를 알게 되어 같이 적어봅니다.

template 태그 안에 p태그를 직접 접근하지 않고 아래와 같은 방법으로 접근하는 방법입니다.

 

<template id="my-paragraph">
	<p>My paragraph</p>
</template>

const template = document.getElementById('my-paragraph');
document.body.appendChild(template.content);

 

 

 

 

 

 

 

 

참조

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_conditional

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_lists

https://www.youtube.com/watch?v=myrTYZf9roA&feature=youtu.be