init 연결, aura:if 사용

aura component 속성 추가

1. init controller 연결해 제목을 설정함.
2. isShow라는 이름의 참/거짓을 저장하는 속성을 사용.
3. testTitle라는 이름의 문자열을 저장하는 속성을 사용.
4. 버튼을 눌렀을 때 값을 반대로 저장함.

• TestCmp.cmp

<aura:component>

  <!-- controller 연결. controller에 있는 init을 실행시킴. -->
  <aura:handler name="init" value="{!this}" action="{!c.init}" />

  <!-- 사용하는 속성 추가. name="이름" type="타입" default="기본값" -->
  <aura:attribute name="isShow" type="Boolean" default="false"/>
  <aura:attribute name="testTitle" type="String" default=""/>

  <div class="wrap">
      <div>
          <!-- 속성은 {!v.속성이름} 으로 불러올 수 있음-->
          <h1>{!v.testTitle}</h1>
          <button data-name="{!v.isShow}" onclick="{!c.clickBtn}">버튼</button>
      </div>

      <aura:if isTrue="{!v.isShow == true}">
          <!-- isShow의 값이 true인 경우 보이는 부분-->
          <p>isShow의 값이 true면 보임</p>

          <aura:set attribute="else">
              <!-- isShow의 값이 false인 경우 보이는 부분-->
              <p>isShow의 값이 false면 보임</p>
          </aura:set>
      </aura:if>

  </div>

</aura:component>

<aura:if> 태그 사이에 <aura:set attribute="else"> 태그가 들어가야 한다는 것 주의.

• TestCmpController.controller

//처음 로딩 시 handler로 실행되는 init
init : function(component, event, helper){
	console.log(">> init"); //init이 제대로 실행되었는지 확인하는 console.
    
    // testTitle 값을 가져와 title에 저장.
    // title 값을 변경하고, 그 값을 다시 testTitle에 저장함. 
    let title = component.get("v.testTitle");
    title = "제목부분입니다.";
    component.set("v.testTitle", title);
    
    // 여러개를 바꾸는 경우 위처럼 사용하지만, 
    // 위의 3줄을 요약하면 다음과 같이 사용할 수 있음.
    // component.set("v.testTitle", "제목부분입니다");
},
//버튼을 눌렀을 때 
clickBtn: function(component, event, helper){
    var currentTarget = event.currentTarget;
    let name = appData.dataset.name;
    console.log("name : ", name); //data-name으로 설정된 v.isShow값을 불러옴 
        
    //let isShow = component.get("v.isShow");
    //가져오는 데이터는 v.isShow이기 때문에 단순히 저장된 isShow를 불러와도 괜찮음
    
    //false였다면 true로, true였다면 false로 저장 !는 not()과 같음.
    component.set("v.isShow", !isShow); 
}