Lightning 웹 구성 요소 - 조건부 렌더링

돌아와서 반갑습니다!

이것은 이전 블로그의 연속입니다.

이전 부분에서는 JavaScript를 가지고 놀면서 Simple Calculator 구성 요소를 만들었습니다. 이 블로그에서는 DOM 요소를 조건부로 렌더링하는 방법을 살펴보겠습니다.

새로운 컴포넌트를 만들어 봅시다. 사용자로부터 입력을 받기 위해 몇 가지 요소를 추가한 다음 조건부 렌더링을 사용하여 버튼 클릭 시 데이터를 표시합니다.

UI 롤링을 시작하겠습니다.

가장 친한 친구인 Command Pallate를 호출하고 새로운 Lightning 구성 요소를 생성해 봅시다. 구성 요소의 이름을 employeeDetails로 지정하지만 다시 한 번 귀하가 지정합니다. 또한 camelCase에서 구성 요소의 이름을 지정하는 것을 잊지 마십시오. 매우 중요.

<template>
    <lightning-card title="Employee Details" class="slds-text-align_center">
        <div class="slds-p-around_medium">
            <lightning-input type="text" placeholder="Name" onchange={handleName}></lightning-input>
            <lightning-input type="number" placeholder="Phone Number" onchange={handlePhone}></lightning-input>
            <lightning-input type="email"  placeholder="Email address" onchange={handleMail}></lightning-input>
            <lightning-input type="number" name="ctc" placeholder="Expected CTC" onchange={handleCtc}></lightning-input>
        </div>
        <div class="slds-grid slds-p-around_medium">
           <lightning-button class="slds-col" variant="brand" label="Show Details" onclick={handleClick}></lightning-button>
        </div>
    </lightning-card>
</template>

HTML 파일을 수정하고 조직에 코드를 배포하면 다음과 같은 내용을 볼 수 있어야 합니다.

자바스크립트!

import { LightningElement } from 'lwc';

export default class EmployeeDetails extends LightningElement {
    name;
    phone;
    mail;
    ctc;

    handleName(event) {
        this.name = event.target.value;
    }
    handlePhone(event) {
        this.phone = event.target.value;
    }
    handleMail(event) {
        this.mail = event.target.value;
    }
    handleCtc(event) {
        this.ctc = event.target.value;
    }
}

UI에 요소를 추가하고 입력을 처리하는 메서드를 추가했습니다.

이제 버튼 클릭으로 렌더링하는 방법을 확인하겠습니다.

HTML을 조건부로 렌더링하려면 조건부 콘텐츠를 둘러싸는 중첩 태그에 if:true|false 지시문을 추가합니다. if:true|false={property} 지시문은 데이터를 템플릿에 바인딩하고 데이터가 truthy or falsy 값인지 여부에 따라 DOM 요소를 제거 및 삽입합니다.

HTML 파일을 수정해 보겠습니다. 버튼의 <div> 태그를 닫은 후 추가합니다.

<template if:true={isSelected}>
            <div class="slds-text-align_center"> 
                <div class="slds-text-heading_medium">Employee Details</div><br/>
                <lightning-formatted-text value={name} ></lightning-formatted-text><br/><br/>
                <lightning-formatted-phone value={phone} ></lightning-formatted-phone><br/><br/>
                <lightning-formatted-email value={mail}></lightning-formatted-email><br/><br/>
                <lightning-formatted-number value={ctc} format-style="currency" currency-code="EUR" ></lightning-formatted-number>
            </div>
        </template>

변수 isSelected를 하나 더 추가하고 클릭을 처리하는 메서드를 추가합니다.

이러한 변경 사항을 추가하려면 JavaScript 파일을 수정하십시오.

   isSelected = false;

    handleClick() {
    this.isSelected = true;
    }

템플릿에서 <lightning-formatted-text> , <lightning-formatted-email> 등을 어떻게 사용했는지 알아채셨나요? 이에 대한 자세한 내용을 읽을 수 있습니다here. 클릭하기에 너무 게으른 경우 이러한 태그는 특정 방식으로 데이터의 형식을 지정합니다. 구성 요소에서 확인할 수 있습니다.

코드를 배포하고 어떻게 보이는지 봅시다.



효과가있다!


전자 메일, 전화 번호 및 통화가 어떻게 표시되는지 확인합니다. 이것이 '포맷된' 태그의 마법입니다.

버튼을 강화합시다.

Stateful button 라는 것이 있습니다. lightning-button-stateful 구성 요소는 소셜 미디어의 좋아요 버튼과 유사하게 상태를 전환하는 버튼을 나타냅니다. 상태 저장 버튼은 선택한 상태에 따라 다른 레이블과 아이콘을 표시할 수 있습니다.

HTML 파일을 수정하고 일반 버튼 대신 stateful 버튼을 사용해보자.

이전 버튼 태그를 이것으로 바꾸십시오.

<lightning-button-stateful class="slds-col" label-when-off="Show Details" label-when-on="Hide Details" variant="brand"  selected={isSelected} onclick={handleClick}></lightning-button-stateful> 

이를 처리하기 위해 JavaScript를 수정해 보겠습니다. 이전handleClick() 방법을 이 방법으로 교체하고 다른 방법showDetails()을 추가합니다.

handleClick() {
        this.isSelected = !this.isSelected;
        showDetails(this.isSelected);
    }
    showDetails(isSelected) {
        if(isSelected) {
            this.isShown = true;
        }
    }

저장하고 배포합니다. 변경 사항을 살펴보겠습니다.



무슨 일이 일어나고 있는지 보십니까? 조건부 렌더링뿐만 아니라 버튼의 레이블도 클릭할 때마다 변경됩니다. 멋지지 않다고 말해줘! xD

자, 이 부분은 여기까지입니다. 사용자로부터 입력을 받는 새 구성 요소를 만들고 데이터를 조건부로 표시하는 버튼을 추가했습니다. 또한 '포맷된' 태그와 '상태 저장 버튼'도 탐색했습니다.
다음에는 반복자를 사용하는 방법과 각각에 대해 살펴보겠습니다.

이 내용이 마음에 들면 lwc에서 더 멋진 내용을 보려면 시리즈를 따르십시오. 매일 1개의 게시물이 올라갑니다.

읽어 주셔서 감사합니다! :디