Vue 란 ? 간단 개념 및 특징 - 선언적 렌더링과 반응성 이해하기

 

 

 

해당글은 Vue  공식문서를 기반으로 작성되었으며 출처는 하단에 존재합니다. 

 

 

 

[ 개념 ]

 

• 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크 
• 표준 HTML, CSS 및 JavaScript 를 기반으로 구축
• 컴포넌트 기반 프로그래밍 제공

 

[ 예시 ] 

 

      

      

      

    
    

      <javascript />
    
import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

 

      

      

      

    
    

      <javascript />
    
<div id="app">
  <button @click="count++">
    숫자 세기: {{ count }}
  </button>
</div>

 

 

[ 예시로 볼 수 있는 Vue 의 주요특징 ] 

선언적 렌더링(Declarative Rendering)
:Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성할 수 있습니다.

 

+ ) 

선언적 렌더링 특징을 볼 수 있는 핵심 코드 : `{{ count }} `

 

위의 예시에서 `{{ count }} `로 값을 선언하고 클릭을 통해 count 값이 바뀌면 화면 내용이 바뀐다.

개발자가 어떻게 화면을 갱신할지 직접 짜지 않아도 되며 HTML 안에 상태(count)를 바로 선언하는 것만으로도 갱신이 가능하다. 

 

반응성(Reactivity)
: Vue는 JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행합니다.

 

+ ) 

반응성 특징을 볼 수 있는 핵심 코드 : `@click="count++"`

 

버튼을 누르면 count++ 가 실행되고, 그에 따라 실제 count 데이터가 바뀌는데 Vue 가 이것을 자동으로 감지한다.

DOM  을 직접 건드리지 않고도 Vue 가 알아서 감지하고 처리해주므로 상태가 바뀜에 따라 화면도 자동으로 반응해서 바뀌는 것을 Vue의 반응성 특성이라 할 수 있다.

 

 

 

 

출처 : 

https://v3-docs.vuejs-korea.org/guide/introduction.html#what-is-vue

소개 | Vue.js