[Vue] 반응형데이터 만들고 화면에 출력해주기 (선언적 렌더링)

⚠️ 이 포스팅은 Vue3(한국어): 시작하기를 공부하고 정리한 블로그 포스팅입니다. ⚠️

1. 선언적 렌더링(Declarative Rendering)

 

---

 

선언적 렌더링

JavaScript로 HTML 문서의 데이터를 변경할때는 다음과 같은 과정을 거친다:

1. 데이터 변경

2. 변경된 데이터를 해당 요소에(화면에) 업데이트

 

JavaScript로 문서에 있는 데이터를 변경할때는 항상 변경된 데이터를 화면에 표시해주는 작업을 해주어야한다. 이러한 불편함을 해소하기 위해 자바스크립트 프레임워크, 라이브러리를 사용한다.

 

Vue, React, Svelte와 같은 자바스크립트 프레임워크는 데이터를 변경하는 즉시 화면에 반영되기 때문에 변경된 데이터를 화면에 출력하는 작업을 생략할 수 있어 편리하다.

 

아래의 코드는 자바스크립트 프레임워크 중 하나인 Vue로 반응형 데이터를 만들고 화면에 출력해주는 방법이다.

 

반응형 데이터란?

데이터가 바뀔때 화면도 자동으로 바뀐 데이터를 출력해주는 것

 

반응형데이터 만들고 화면에 출력해주기

vue를 cdn 주소로 연결

<script src="https://unpkg.com/vue@next"></script>

HTML 파일

<!-- mount로 연결된 요소(id가 app인 div)는 Vue에서 관리되는 영역 -->
<div id="app">
  <!-- 이중중괄호를 사용하면 자바스크립트 코드에 접근할 수 있다 -->
  <div>Message: {{ message }}</div>
  <!-- 이벤트 핸들러 onClick을 Vue에서는 v-on:click 또는 축약형으로 @click으로 사용할 수 있다 -->
  <button @click="message = 'Bye Vue!'">Change Message</button>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

자바스크립트 파일에서 Vue.createApp(Message).mount('#app');로 id가 app인 div 요소에 정의된 객체 Message를 연결시켜주었다. 객체 Message에는 데이터 message가 정의되어 있고 HTML 문서에서 이중중괄호 {{  }}를 사용해서 정의된 데이터에 접근할 수 있게 된다.

 

Vue에서 이벤트 핸들러 click을 사용하기위한 두가지 방법:

1. v-on:click=""

2. @click=""

 

@click은 v-on:click의 축약 형태로 더 자주 사용된다. 두가지 모두 해당 요소를 클릭했을때 사용되는 이벤트핸들러이며 ""안에 클릭후 일어날 코드를 정의해준다.

 

JS 파일

const Message = {
  // Message의 데이터
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
  // Message의 메서드
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    },
  },
};

// HTML 문서에 app 아이디를 가지고 있는 요소는 객체 Message 안에 있는 데이터에 접근할 수 있다
Vue.createApp(Message).mount('#app');

Vue에서는 데이터를 객체형태로 만들어 사용한다. 객체 Message에는 유동적인 데이터와 그 데이터에 변화를 주는 함수(메서드) 두가지가 정의되어 있다. data 함수의 리턴값이 데이터, methods에 정의된 함수가 메서드다.

 

반응형 데이터 만들어주는 2가지 방법

방법1

객체 따로 빼주기

const Message = {
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
};

Vue.createApp(Message).mount('#app');

방법2

객체를 createApp 메서드 안에서 생성해주면서 바로 인자로 넘겨주기

Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
}).mount('#app');

 

새로 배운 디렉티브 정리

• v-on:click="메서드": 클릭했을때 실행할 메서드를 연결해준다
• @click="메서드": v-on:click의 축약형으로 v-on은 @로 대체해 사용할 수 있다