[Vue.js] Vue 렌더링(render) 함수 이해하기

예제

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <p>이름: {{ name }}</p>
    <button @click="changeName">이름 변경</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '홍길동',
      greeting: '안녕하세요,'
    };
  },
  methods: {
    changeName() {
      this.name = '이몽룡';
    }
  },
  render(createElement) {
    return createElement(
      'div',
      [
        createElement('h1', this.greeting),
        createElement('p', '이름: ' + this.name),
        createElement('button', {
          on: {
            click: this.changeName
          }
        }, '이름 변경')
      ]
    );
  }
}
</script>

설명

• Vue.js에서 render 함수는 가상 DOM(Virtual DOM)을 생성하는 역할을 합니다. 이 함수는 createElement 함수를 통해 가상 DOM 요소를 생성하고 이를 반환합니다.
• 위 예제에서는 render 함수를 사용하여 템플릿(template) 대신에 가상 DOM을 생성하고 있습니다. 이를 통해 템플릿 대신에 JavaScript 코드로 직접 UI를 생성할 수 있습니다.
• createElement 함수는 첫 번째 인자로 요소의 태그 이름 또는 컴포넌트를 받고, 두 번째 인자로는 속성과 하위 요소들을 받습니다. 세 번째 이후의 인자는 해당 요소의 자식 요소들입니다.
• 위 예제에서는 createElement 함수를 사용하여 div, h1, p, button 요소를 생성하고 있습니다. 각 요소에는 필요한 속성과 이벤트 핸들러를 설정하고 있습니다.

주요 특징

• 템플릿 대체: render 함수를 사용하면 템플릿 대신에 JavaScript 코드로 직접 UI를 생성할 수 있습니다.
• 동적 렌더링: render 함수를 사용하면 조건부 렌더링과 반복 렌더링을 훨씬 더 유연하게 다룰 수 있습니다.
• 코드 최적화: 가상 DOM을 직접 제어하므로 효율적인 코드를 작성할 수 있습니다.