4. 선언적 렌더링 - MrKwon/Vue-Native GitHub Wiki

Vue Native의 코어에는 우리가 직관적인 템플릿 문법을 이용하여 선언적으로 데이터를 렌더링할 수 있게 해주는 시스템이 있습니다.

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data: function() {
    return {
      message: "Hello World"
    };
  }
};
</script>

우리는 이미 우리의 첫번째 Vue Native 앱을 생성하였습니다 ! 이는 템플릿 문자열을 렌더링하는 것과 상당히 비슷해 보이지만 보이지 않는 곳에서 많은 일들이 일어나고 있습니다. 데이터와 네이티브 UI 요소(element)들이 지금 막(now) 연결되고 모든 것들이 지금 막(now) 반응적이게 됩니다.

텍스트 보간법을 추가하여 우리는 요소 속성(attribute)들을 아래와 같이 바인드할 수도 있습니다.

<template>
  <view>
    <button v-bind:title="message" v-bind:on-press="handleBtnPress"/>
  </view>
</template>

<script>
export default {
  data: function() {
    return {
      message: "Hello World"
    };
  },
  methods: {
    handleBtnPress: function() {
      alert('Btn Press');
    }
  }
};
</script>

여기엔 새로운 것이 있습니다. v-bind라는 속성입니다. 이 속성을 **디렉티브(directive)**라고 부릅니다. 디렉티브들은 Vue Native에 의해 제공되는 특별한 속성이라는 것을 알려주는 v-가 접두사로 있습니다. 이 속성들은 내부적으로 React Native의 props들과 바인드 됩니다. 그리고 추측하신대로 이 디렉티브들은 재렌더링에서 특수한 반응형 동작이 적용됩니다. 여기서, 기본적으로는 "Vue 인스턴스의 message 프로퍼티로 요소의 title 속성을 최신상태를 유지합니다" 라고 말합니다.

⚠️ **GitHub.com Fallback** ⚠️