Lightning Web Component(3)

lcw 기초 정리

Tue, Dec 17, 2019 written by 고봉훈

1. JavaScript Property 이름

JavaScript에서의 property의 이름은 Camel Case, HTML에서의 property 이름은 Kebab Case로 써야합니다.
예를들어, JavaScript에서 property 이름이 itemName 이라면, HTML에서는 item-name으로 매핑됩니다.

아래의 문자로 속성 이름을 시작하면 안됩니다.

  • on (예: onClick)
  • aira (예: ariaDescribedby)
  • data (예: dataProperty)

아래의 예약어를 속성 이름으로 사용하면 안됩니다.

  • slot
  • part
  • is


2. JavaScript에서 HTML 전역 속성에 접근

일부 HTML 전역 속성은 LWC Camel Case 및 Kebab Case 규칙을 따르지 않습니다.
이러한 HTML 전역 속성 중 하나에 대한 getter, setter를 작성하는 경우 아래 목록을 참고하세요.

HTML 전역 속성
JAVASCRIPT의 속성
accesskey accessKey
bgcolor bgColor
colspan colSpan
contenteditable contentEditable
crossorigin crossOrigin
datetime dateTime
for htmlFor
formaction formAction
ismap isMap
maxlength maxLength
minlength minLength
novalidate noValidate
readonly readOnly
rowspan rowSpan
tabindex tabIndex
usemap useMap


3. JavaScript로 ARIA 속성에 접근

ARIA는 웹 보조기기를 지원하는 속성입니다. JavaScript로 이 속성에 접근하려면 Camel Case를 사용합니다.
예를들어, aria-checked에 접근하려면 ariaChecked를 사용


4. 반응성 속성

1. Public Property

Public Property를 노출시키려면 @api를 사용해야합니다.
마크업에서 부모 컴포넌트는 자식 컴포넌트의 Public Property에 접근할 수 있습니다.
Public Property는 반응 속성입니다. 반응 속성은 값이 변경되면 컴포넌트가 리렌더링 되며, 템플릿에 사용 된 모든 표현식이 재평가됩니다.

@api를 사용하려면 아래처럼 lwc에서 import 시켜야합니다. 

    import { LightningElement, api } from 'lwc';

예제 ) 

    // todoItem.js
    import { LightningElement, api } from 'lwc';
    export default class TodoItem extends LightningElement {
        @api itemName = 'New Item';
    }


    <!-- todoItem.html -->
    <template>
        <div class="view">
            <label>{itemName}</label>
        </div>
    </template>
    <!-- todoApp.html -->
    <template>
        <div class="listing">
            <c-todo-item item-name="Milk"></c-todo-item>
            <c-todo-item item-name="Bread"></c-todo-item>
        </div>
    </template>
    // todoApp.js
    const myTodo = this.template.querySelector('c-todo-item');
    myTodo.itemName // New Item


2. Tracked(Private Reactive) Property

Tracked Property는 Private Reactive Property라고도 부릅니다.
Private 속성의 값을 추척하고 변경 될 때 컴포넌트를 리렌더링하려면 @track속성을 사용하세요.

@api와 달리 @track속성은 비공개 속성입니다.

@track 속성은 과도하게 사용하지 말고, 속성 값이 변경 될 때 컴포넌트를 리렌더링 시켜야하는 경우에만 사용하는걸 권장합니다.

@track를 사용하려면 아래처럼 lwc에서 import 시켜야합니다. 

    import { LightningElement, track } from 'lwc';

예제 ) 

    <!-- simpleTrack.html -->
    <template>
        <p>{itemName}</p>
        <lightning-button label="Change Item" onclick={handleClick}></lightning-button>
    </template>

    // simpleTrack.js
    import { LightningElement, track } from 'lwc';

    export default class App extends LightningElement {
        @track itemName = 'milk';

        handleClick(){
            this.itemName = 'bread';
            console.log('itemName is ' + this.itemName);
        }
    }

위의 예제에서 컴포넌트가 처음 렌더링 될 때는 itemName이 milk로 출력되지만, Change Item버튼을 클릭하면, itemName이 bread로 바뀌고 컴포넌트가 리렌더링되어 bread가 출력됩니다.
만약 itemName 앞에 @track이 없다면, console에서는 bread로 찍히지만, 컴포넌트가 리렌더링 되지 않아 템플릿에서는 여전히 milk로 출력됩니다.


LWC