LWC에서 Array 다루기2

● 화면 미리보기

● 코드 작성

※ lwc029SplitObj.html

<template>
    <div class="wrapper">
        <!-- newArray area -->
        <h3>● 왼쪽에서 오른쪽 방향으로 위에서 5개씩 채우기 </h3>
        <div class="vertical-array">
            <template for:each={testArray} for:item="item" for:index="index">
                <p key={item}>{item}</p>
            </template>
        </div>
        
        <!-- newArray area -->
        <h3>● 기존 배열을 5개씩 나눠서 출력하기</h3>
        <div class="array-wrap">
            <template for:each={newArray} for:item="subList" for:index="index">
                <div key={subList}>
                    <p>{index}번째 문단</p>
                    <ul class="sub-wrap">
                        <template for:each={subList} for:item="item" for:index="idx">
                            <li key={item}>- {item}</li>
                        </template>
                    </ul>
                </div>
            </template>
        </div>
    </div>
</template>

※ lwc029SplitObj.js

import { LightningElement, track} from 'lwc';

export default class Lwc029SplitObj extends LightningElement {
    @track testArray = [
        '0001', '0002', '0003', '0004',
        '0005', '0006', '0007', '0008', 
        '0009', '0010', '0011', '0012',
    ];
    @track newArray = [];

    connectedCallback(){
        this.splitTestArray();
    }
    splitTestArray(){
        console.log('▶ splitTestArray');
        let splitNum = 5; //몇개씩 나눌 것인지
        let lengthNum = Math.ceil(this.testArray.length / splitNum) + 1;

        let oneDepth = [];
        for(let j = 1; j < lengthNum; j++){
            let twoDepth = [];
            for(let i = ((j-1)*splitNum); i < j*splitNum ; i++){
                if(i < this.testArray.length){
                    console.log('i : ', i);
                    twoDepth.push(this.testArray[i]);
                }
            }
            oneDepth.push(twoDepth);
        }
        console.log('oneDepth', oneDepth);
        this.newArray = oneDepth;
    }
}

※ lwc029SplitObj.css

.wrapper{
    width: 100%;
    max-width: 800px;
    margin: 10px auto;
    background-color: #e7e7e7;
    padding: 20px 10px;
    border-radius: 5px;
    min-height: 200px;
    box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
}
.vertical-array {
    grid-auto-flow: column;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    display: grid;
    gap: 5px;
}
.vertical-array p {
    margin: 0;
    padding: 10px;
    background-color: #ddd;
    text-align: center;
    border-radius: 5px;
}
.array-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.array-wrap p {
    margin:  0;
}
ul.sub-wrap {
    margin-top:  10px;
    margin-bottom:  0;
    padding: 0;
}
.array-wrap div {
    padding: 10px;
    background-color: #d9d8de;
    border-radius: 5px;
}

ul.sub-wrap li {
    display: block;
}