[Salesforce] LWC Decorators @Wire @Api @track 비교

 

LWC로 개발을 처음부터 시작하려고 하면서 이전까지는 돌아가는 코드들을 복사 붙여넣기를 하다가

이게 왜 이렇게 돌아가는지 이해하면서 직접 처음부터 만들려고 하니까 역시 쉽지 않았다.

 

그래서 간단하게 정리해보는 LWC Decorator

 

@wire

- 세일즈포스 관련 데이터(필드, 오브젝트 정보, 메타데이터 등등)를 읽을 때 사용하는 Decorators

- 자바스크립트간 Wire adapter를 사용하기 위해 사용 

- 프로비저닝 데이터(?)...를 불러올 때 사용한다는데 프로비저닝 데이터가 뭐지..(?)

- apex class 내의 메서드를 불러올 때 사용하기도 하는데 필수는 아니었다...

- 하단의 출처들 중 가장 이해하기 쉬운 설명 : Use a wire adapter to read Salesforce data (records) and metadata (layout details, fields on an object, and so on

// Example
import getAccounts from '@salesforce/apex/MyAccountController.getAccounts';

// Use the wire service to provision data to either a property or a function.
// This example provisions data to a property.
@wire(getAccounts)
accounts;

// This example provisions data to a function.
@wire(getAccounts)
wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accounts = undefined;
        }
    }

 

@api

- public한 개념 (public Property)

-컴포넌트간 구조적으로 해당 프로퍼티들을 주고 받을 때 유용하게 사용  (아마도 자바의 전역변수랑 비슷한 느낌..)

 ex, 간혹 컴포넌트 안에 또 다른 컴포넌트 (parent -> child) 관계로  parent와 Child간 프로퍼티를 전달하려고하면 해당 Decorator를 통해 선언하면 가능

- 어떤 예시에서는 aura의 design의 프로퍼티 설정도 말했는데 그런 느낌인가보당...

 

@track

- Private한 Property.

- 컴포넌트가 변할 때, 해당 프로퍼티를 추적하거나 할 때 사용 

 ex, 업데이트 되어 새로운 값을 렌더링 해야할 때

 

출처 https://developer.salesforce.com/docs/component-library/documentation/lwc/reference_decorators

Decorators - Salesforce Lightning Component Library

http://simpluslabs.com/how-to-create-update-delete-and-fetch-records-in-lightning-web-component/

How to use decorators( wire, track, api) and work with Salesforce Data in Lightning Web Components

https://sfdcbook.blogspot.com/2020/12/track-vs-api-vs-wire.html