LWC 02_Create&Deploy

 

 

목차

• LWC 생성하기
• LWC 배포하기

 

 

 

 

 

 

 

---

LWC 생성하기

 

 

 

LifeCycle

Lightning Web Components는 컴포넌트의 Lifecycle에서 중요 이벤트까지 코드를 잠글 수 있는 방법 제공

 

이벤트에 포함되는 컴포넌트 :

• Created
• Added to the DOM
• Rendered in the browser
• Encountering errors
• Removed from the DOM

Callback 메소드를 사용해 이러한 Lifecycle 이벤트에 응답

Ex. connectedCallback( )은 컴포넌트가 DOM*에 삽입될 때 호출됨

      disconnectedCallback( )은 컴포넌트가 DOM에서 제거될 때 호출됨

※ DOM(Document Object Model) : XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스

 

조건부 렌더링을 테스트하기 위해 사용한 javaScript 파일에서는 connectCallback( ) 메소드를 사용해 컴포넌트가 DOM에 삽입되면 코드가 실행됨. 코드는 3초 후 true로 설정됨

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
    ready = false;
    connectedCallback() {
    	setTimeout(() => {
            this.ready = true;
            //this = connectedCallback() 최상위 클래스
        }, 3000);
    }
}

 

 

 

Decorator

: 속성이나 함수의 동작을 수정하기 위해 javaScript에서 자주 사용됨

 

Decorator를 사용하려면 lwc 모듈에서 decorator 가져와 속성/함수 앞에 배치하기

import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement {
    @api message;
}

여러 decorator를 import 할 수 있지만, 하나의 속성/함수는 하나의 decorator만 가질 수 있음

 

Lightning Web Components의 decorator 예시 :

@api

• 필드를 public으로 표시
• public 속성은 컴포넌트의 API를 정의함
• HTML 마크업에서 컴포넌트를 사용하는 owner 컴포넌트는 컴포넌트의 public 속성에 액세스 O
• 모든 public 속성은 반응적 (reactive)
• 즉, 프레임워크가 속성의 변경 사항 관찰
• 속성의 value가 바뀌면 프레임워크가 반응해 컴포넌트를 rerender

TIP

• Field와 Property는 거의 상호 교환 가능한 용어
• 컴포넌트 작성자는 javaScript 클래스에서 필드를 선언
• 클래스의 인스턴스에는 속성이 있음. 컴포넌트 소비자에게는 Field = Property
• LWC에서는 오직 컴포넌트 author가 @api로 데코레이트 하는 필드만 소비자가 object property로 public으로 사용 O

@track

• Object의 속성이나 배열의 요소에 대한 변경 사항을 관찰하도록 프레임워크에 지시
• 변경이 발생하면 프레임워크는 컴포넌트 다시 렌더링
• 모든 필드는 반응적(reactive). 필드 값이 변경되고 필드가 템플릿 / 템플릿에 사용된 속성의 getter에 사용되는 경우 프레임워크는 컴포넌트를 다시 렌더링
• @track을 사용해 필드를 다시 데코레이트 할 필요 X
• 필드에 object 또는 array가 포함되어 있고 프레임워크가 object의 property 또는 array 요소의 변경을 관찰하려는 경우에만 @track 사용
• 전체 속성의 값을 변경하려면 @track 사용 X

@wire

세일즈포스 org로부터 데이터를 쉽게 가져오고 바인딩할 수 있는 방법 제공

 

 

 

 

 

 

 

---

LWC 배포하기

 

 

 

Component 설정 파일

.js-meta.xml : Lightning App Builder에서 사용하는 컴포넌트의 설계 구성을 포함한 Salesforce의 메타데이터를 제공

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Product Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Product__c</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

필수!

apiVersion은 Salesforce API 버전에 바인드

 

<isExposed> true/false : 컴포넌트를 다른 네임스페이스에서 쓸 수 있도록 함

• Aura의 managed package에서
• 다른 org의 Lightning App Builder에서

선택 사항

targets는 Lightning App Builder에서 컴포넌트를 추가할 수 있는 Lightning page의 type을 지정

targetConfigs는 컴포넌트를 지원하는 오브젝트 등 각 유형의 Lightning page에 고유한 동작을 지정

 

+) Full list of Supported syntax 보기

 

 

 

파일 배포하기

Dev Hub 인증 >> SFDX: Authorzie an Org

파일 배포 >> SFDX: Deploy Source to Org

 

 

 

 

 

 

 

 

 

 

※ 출처 : Lightning Web Component

Lightning Web Components Basics