[LWC] 데코레이터란?

데코레이터란?

Lightning 웹 구성 요소 프로그래밍 모델의 속성 또는 함수 기능

종류로는 @api, @wire, @track으로 총 3개가 있다.

1. @api

@api 데코레이터는 컴퍼넌트 내 변수 또는 함수에 지정 가능하다.
@api 데코레이터를 활용도는 2가지가 있다.
1. (해당 화면이 레코드 페이지인 경우) 레코드 Id를 가져올 때 사용한다.
2. A 컴퍼넌트 안에 B 컴퍼넌트가 있는 있는 경우, B에서 변수값을 A로부터 상속 받을 때 사용한다.
1) 레코드를 가져올 때는 아래와 같이 지정해주면 된다.

export default class RecordPageComponent extends LightningElement {
  @api recordId;
}

*부모-자식관의 관계에 있는 컴퍼넌트의 경우 
(ex: A 컴퍼넌트안에 B 컴퍼넌트가 포함된 경우, A는 부모 B는 자식의 관계에 있다고 표현한다.) 
자식 Component에서 변수에 @api 데코레이터를 지정하여, 부모 Component의 값을 상속 받을 수 있다.

ParentComponent.html
<template>
    <c-child-Component child-label={value}></c-child-Component>
</template>

ParentComponent.js
export default class ParentComponent extends LightningElement {
    value = 'child label';
  
} 

ChildComponent.html
<template>
  childLabel : {childLabel}
</template>

ChildComponent.js
export default class ChildComponent extends LightningElement {
    @api childLabel;

}

2. @track