[Lightning Component] 컴포넌트에 Markup, Style을 추가해보자

컴포넌트 번들 리소스

 

라이트닝 컴포넌트의 구성요소는 HTML, Aura 기반의 컴포넌트, 기타 라이트닝 컴포넌트에 대한 태그와 속성을 사용할 수 있다. 또한, Force.com 표현방식으로 속성에 대한 바인딩을 구성할 수 있다.

 

추가로, 클라이언트 사이드에서 사용하는 컨트롤러를 구성할 수 있으며 이는 JavaScript로 구성할 수 있다.  Helper라는 캡슐화 된 JavaScript 함수 기반의 추가 컬렉션을 사용할 수 있고 Controller 함수, 또 다른 JavaScript에서 호출 할 수 있다. Style 리소스도 기본적인 CSS를 포함한 캡슐화 된 CSS 규격을 사용할 수 있다. 

 

div, table, h3 처럼 HTML에서 사용하던 마크업 언어와 aura:attribute, ui:outputNumber 등의 Aura, UI 네임 스페이스 태그도 사용할 수 있다. 매개변수를 사용해 데이터를 클래스 메서드로 전달하는 방법도 VisualForce 태그 기반의 마크업 언어와 공통적인 패턴을 갖고 있다.

 

VisualForce의 rendered, rerender 속성과 마찬가지로 표현식을 통해 컴포넌트 UI 표시에 조건부 영향을 줄 수 있다. 19행은 모든 expense 항목의 합계가 다른 승인 된 expense 합계와 일치할 경우 녹색으로, 그렇지 않은 경우 빨간색으로 표시될 수 있는 표현식을 지정해 각 행별 데이터에 따른 CSS를 별개로 적용하고 있다.

 

Style 리소스에 대한 캡슐화는 CSS 클래스 지정자를 통해 사용하는 기존의 방법과 동일하다.

 

aura:attribute 태그를 통해 컴포넌트 페이지에서 사용 할 변수를 선언하는 과정이다.

 

ui:outputNumber 태그를 통해 aura:attribute로 선언한 변수를 출력하는데 사용할 수 있다.