CustomLabel 여러개 불러오기

코드를 간단하게 하기 위한 것으로, 참고용으로만 부탁드립니다.

● 사용한 라벨

● Custom Label을 하나씩 불러오기

1. lwc017LabelWithJs 생성

※ lwc017LabelWithJs.html

<template>
    <div class="wrapper">
        <!-- 라벨 하나씩 불러오기 -->
        <lightning-button-group>
            <lightning-button label={testLabel.numOne}></lightning-button>
            <lightning-button label={testLabel.numTwo}></lightning-button>
            <lightning-button label={testLabel.numThree}></lightning-button>
        </lightning-button-group>
    </div>
</template>

※ lwc017LabelWithJs.js

import { LightningElement } from 'lwc';

import testLabel01 from '@salesforce/label/c.testLabel01';
import testLabel02 from '@salesforce/label/c.testLabel02';
import testLabel03 from '@salesforce/label/c.testLabel03';

export default class Lwc016LabelWithJs extends LightningElement {
    testLabel = {
        numOne : testLabel01
        ,numTwo : testLabel02
        ,numThree :testLabel03
    }
}

※ lwc017LabelWithJs.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__AppPage</target>
      <target>lightning__RecordPage</target>
      <target>lightning__HomePage</target>
      <target>lightningCommunity__Page</target>
      <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

가져오는 라벨이 많아질수록, 코드가 엄청 길어집니다.

2. 결과 확인
   

● JS 파일을 만들어 한번에 불러온 뒤, JS파일을 사용해 불러오는 방식

1. getLabel 파일 생성

html 파일은 필요없습니다.

※ getLabel.js

import chocolate01 from '@salesforce/label/c.chocolate01';
import chocolate02 from '@salesforce/label/c.chocolate02';
import chocolate03 from '@salesforce/label/c.chocolate03';
import candy01 from '@salesforce/label/c.candy01';
import candy02 from '@salesforce/label/c.candy02';
import candy03 from '@salesforce/label/c.candy03';

const chocoLabelGroup = {
    label01: chocolate01, 
    label02: chocolate02, 
    label03: chocolate03
}
const candyLabelGroup = {
    label01: candy01, 
    label02: candy02, 
    label03: candy03
}

export { chocoLabelGroup, candyLabelGroup };

2. lwc017LabelWithJs 파일 수정

※ lwc017LabelWithJs.html (추가)

<!-- 라벨 한번에 불러오기 -->
<lightning-button-group>
    <lightning-button label={chocoLabel.label01}></lightning-button>
    <lightning-button label={chocoLabel.label02}></lightning-button>
    <lightning-button label={chocoLabel.label03}></lightning-button>
</lightning-button-group>

<lightning-button-group>
    <lightning-button label={candyLabel.label01}></lightning-button>
    <lightning-button label={candyLabel.label02}></lightning-button>
    <lightning-button label={candyLabel.label03}></lightning-button>
</lightning-button-group>

※ lwc017LabelWithJs.js (수정)

import { LightningElement, track } from 'lwc';
import {chocoLabelGroup, candyLabelGroup} from 'c/getLabel';

import testLabel01 from '@salesforce/label/c.testLabel01';
import testLabel02 from '@salesforce/label/c.testLabel02';
import testLabel03 from '@salesforce/label/c.testLabel03';

export default class Lwc016LabelWithJs extends LightningElement {
    testLabel = {
        numOne : testLabel01
        ,numTwo : testLabel02
        ,numThree :testLabel03
    }
    @track chocoLabel = chocoLabelGroup;
    @track candyLabel = candyLabelGroup;
}

※ lwc017LabelWithJs.css

.btn-wrap{
    gap: 10px;
    display: flex;
    flex-direction: column;
}

3. 결과 확인