Data Binding (Aura & LWC)

 

 

 

 

마크업에 컴포넌트를 추가할 때 owner 컴포넌트의 property value를 기준으로 컴포넌트의 public property value를 초기화 할 수 있다.

Data binding 동작은 LWC, Aura 개발 모델에서 다르다.

 

<!-- public attribute 예시 -->
<aura:attribute name="recordList" type="List" access="public" default="[]" description="Account list" />

 

 

Aura

{# expression} (Unbound Expression)

값이 정적으로 유지됨

ex. {#v.messageText} ≫ 문자열 값이 변경되어도 변경 내용 반영 X

 

String과 같은 Primitive는 value로 전달되고, 상위&하위 표현식에 대한 데이터 업데이트는 분리됨

Array나 Map과 같은 object는 reference에 의해 전달되므로 하위 데이터에 대한 변경 사항이 상위 항목으로 전파됨

하지만 상위의 change 핸들러는 알림 받지 X

하위 항목으로 전파되는 상위 항목의 변경에도 동일한 동작 적용됨

 

{! expression} (Bound Expression)

값이 동적으로 변경됨

ex. {!v.messageText} ≫ 문자열 값이 변경될 때마다 변경 사항을 반영, 사용되는 컴포넌트에도 영향을 미침

 

두 컴포넌트의 데이터 업데이트는 두 컴포넌트의 양방향 데이터 바인딩을 통해 반영됨

change 핸들러는 상위 컴포넌트와 하위 컴포넌트 모두에서 트리거됨

 

 

 

Lightning Web Components

property value에 대한 컴포넌트 간의 데이터 바인딩은 one-way

상위 컴포넌트에서 하위 컴포넌트로 통신하려면 ≫ 하위 컴포넌트에 property를 설정 / 메소드 호출하기

하위 컴포넌트에서 상위 컴포넌트로 통신하려면 ≫ 이벤트 전송하기

 

 

 

 

 

 

 

 

 

참조 : developer.salesforce.com

Data Binding Behavior Differences With Aura - Salesforce Lightning Component Library