[세일즈포스] 렌더 목록 For Each Loop in LWC

 

 

렌더 목록

항목 목록을 렌더링하려면 for:each지시문이나 iterator지시문을 사용하여 배열을 반복합니다. <template>반복하려는 HTML 요소를 포함하는 중첩 태그에 지시어를 추가합니다 .

지시문 에는 배열의 첫 번째 항목과 마지막 항목에 특수 동작을 적용할 수 있는 속성이 iterator있습니다 .firstlast

어떤 지시어를 사용하든 key지시어를 사용하여 각 항목에 고유 ID를 할당해야 합니다. 목록이 변경되면 프레임워크는 를 사용하여 key변경된 항목만 다시 렌더링합니다. 템플릿의 는 key성능 최적화를 위해 사용되며 런타임 시 DOM에 반영되지 않습니다.

 

각각

지시문을 사용할 때 현재 항목에 액세스하는 데 for:each사용합니다 . for:item="currentItem"이 예에서는 이를 사용하지 않지만 현재 항목의 색인에 액세스하려면 를 사용하십시오 for:index="index".

중첩된 템플릿의 첫 번째 요소에 키를 할당하려면 key={uniqueId}지시어를 사용하세요.

contacts이 예제는 구성 요소의 JavaScript 클래스에 정의된 배열을 반복합니다 .

대표사진 삭제

사진 설명을 입력하세요.

Render Lists

To render a list of items, use for:each directive or the iterator directive to iterate over an array. Add the directive to a nested <template> tag that encloses the HTML elements you want to repeat.

The iterator directive has first and last properties that let you apply special behaviors to the first and last items in an array.

Regardless of which directive you use, you must use a key directive to assign a unique ID to each item. When a list changes, the framework uses the key to rerender only the item that changed. The key in the template is used for performance optimization and isn’t reflected in the DOM at run time.

 

for:each

When using the for:each directive, use for:item="currentItem" to access the current item. This example doesn’t use it, but to access the current item’s index, use for:index="index".

To assign a key to the first element in the nested template, use the key={uniqueId} directive.

This example iterates over an array called contacts, which is defined in the component’s JavaScript class.

 

https://developer.salesforce.com/docs/platform/lwc/guide/create-lists.html?q=for%20each

 

 

[userForEachLoop.html]

<template>

<lightning-card title="User each loop" icon-name="utiliti:user">

<div style="padding:10px">

<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" aria-label="Example table of Opportunities with vertical borders">

<thead>

<tr>

<td>Students Name</td>

<td>Class</td>

<td>Fee</td>

</tr>

</thead>

<template for:each={students} for:item="stu">

<tr key={stu.Id} >

<td>{stu.Name}</td>

<td>{stu.Class}</td>

<td>{stu.Fee}</td>

</tr>

</template>

</table>

</div>

</lightning-card>

</template>

 

[userForEachLoop.js]

import { LightningElement } from 'lwc';

 

export default class UserForEachLoop extends LightningElement {

students = [

{

Id : '001',

Name : 'Student 1',

Class : 'Class 1',

Fee : '1000 $'

},

{

Id : '002',

Name : 'Student 2',

Class : 'Class 2',

Fee : '1000 $'

},

{

Id : '003',

Name : 'Student 3',

Class : 'Class 3',

Fee : '1000 $'

},

{

Id : '004',

Name : 'Student4',

Class : 'Class 4',

Fee : '1000 $'

}

,{

Id : '005',

Name : 'Student5',

Class : 'Class 5',

Fee : '1000 $'

},

{

Id : '006',

Name : 'Student 6',

Class : 'Class 6',

Fee : '1000 $'

},{

Id : '007',

Name : 'Student 7',

Class : 'Class 6',

 

},

];

}

 

[userForEachLoop.js-meta.xml]

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>58.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

<target>lightning__RecordPage</target>

<target>lightning__HomePage</target>

</targets>

</LightningComponentBundle>