Lightning Web Components(LWC)에서는 JavaScript 상단에서 사용하는 특수한 어노테이션들을 데코레이터(Decorator)라고 부릅니다.
이 데코레이터들은 Salesforce 플랫폼과의 연동, 데이터 바인딩, 컴포넌트 통신 등에 중요한 역할을 합니다.
이 글에서는 LWC에서 사용 가능한 모든 데코레이터를 깔끔하게 정리했습니다.
✅ 1. @api
| 항목 | 설명 |
|---|
| 역할 | 공개 속성(Public Property) 또는 메서드로 외부 컴포넌트(LWC, Aura)에서 접근 가능하게 만듦 |
| 주 사용 위치 | 부모 → 자식 컴포넌트 간 데이터 전달 |
| 사용 대상 | 변수, 메서드 |
| 예시 용도 | 부모가 자식 컴포넌트에 데이터를 전달하거나 메서드를 직접 호출할 때 사용 |
✅ 2. @track (⚠️ Deprecated)
| 항목 | 설명 |
|---|
| 역할 | 컴포넌트 내에서 반응형 상태 추적(리액티브) 을 위해 사용되던 속성 |
| 현재 상태 | ⚠️ 최신 버전에서는 대부분 자동 추적됨. 객체/배열의 일부 요소만 업데이트할 경우에만 필요 |
| 사용 대상 | 변수 |
✅ 3. @wire
| 항목 | 설명 |
|---|
| 역할 | Apex, Lightning Data Service, Platform Resource 등에서 데이터를 자동으로 가져오는 바인딩 방식 |
| 특징 | 자동 호출 + 자동 반응형 처리 |
| 사용 대상 | Apex 메서드, LDS 객체, Schema 등 |
| 예시 용도 | Apex에서 @AuraEnabled(cacheable=true) 메서드를 가져와 LWC에 자동 연결 |
✅ 4. @readonly (내부용, 공식 지원 X)
| 항목 | 설명 |
|---|
| 상태 | 과거 일부 컴포넌트 라이브러리 내부에서만 사용되던 비공식 데코레이터 |
| 일반 개발자 사용 여부 | ❌ 지원되지 않으며 일반적으로 사용할 필요 없음 |
✅ 5. @track vs 일반 변수 (비교)
| 속성 | 설명 |
|---|
| 일반 변수 | LWC는 대부분의 변수 변경을 자동 감지함 |
| @track | 배열/객체의 일부 속성 변경을 감지시키고 싶을 때 수동으로 지정 |
| 예외 케이스 | this.data.name = 'abc' 처럼 객체의 내부만 변경하는 경우 @track 필요할 수 있음 (구버전 기준) |
⚠️ 사용 시 주의사항
| 데코레이터 | 주의사항 |
|---|
@api | 부모가 접근하는 속성/메서드는 꼭 @api로 선언되어야 함 |
@wire | 사용하려는 Apex 메서드는 반드시 @AuraEnabled(cacheable=true) 설정 필요 |
@track | LWC의 최신 버전에서는 대부분의 상태 추적이 자동화됨 → 특별한 경우에만 사용 |
✅ 요약 표
| 데코레이터 | 역할 | 대상 | 비고 |
|---|
@api | 외부 접근 가능 속성/메서드 | 변수, 메서드 | 부모 → 자식 통신 |
@wire | 데이터 바인딩 (Apex, LDS) | 변수, 메서드 | 자동 호출 + 자동 반응형 |
@track | 객체/배열 내부 속성 추적 | 변수 | 최신 버전에서는 거의 불필요 |
(비공식) @readonly | 내부용 | 변수 | 사용 비권장, 공식 미지원 |
✨ 마무리
LWC는 React나 Vue처럼 반응형 프론트엔드 개발을 가능하게 해주는 컴포넌트 기반 프레임워크입니다.
여기서 사용하는 데코레이터들은 Salesforce의 서버(Apex), UI, 컴포넌트 간 통신을 부드럽게 연결해주는 핵심 역할을 합니다.
정확한 의미와 사용 목적을 이해하면, 더 유연하고 강력한 LWC 컴포넌트를 만들 수 있습니다.
