vuejs Render Function 이해하기

Render Function이란?

Vue에서는 보통 <template> 문법을 사용해서 컴포넌트의 마크업을 구성하지만, render function을 사용해서 직접 컴포넌트를 구축할 수도 있다. Vue는 빌드 시점에 우리가 작성한 템플릿을 render function으로 컴파일하는데, 이를 통해 Virtual DOM을 구성하게 된다.

왜 Render Function을 사용할까?

일반적인 템플릿 문법으로는 구현하기 어려운 높은 수준의 커스터마이징이나 유연성이 필요할 때 render function을 사용하면 좋다. 주로 다음과 같은 경우에 사용하게 된다:

1. 복잡한 로직 기반의 동적 컴포넌트 렌더링이 필요할 때
2. Virtual DOM을 직접 다뤄야 할 때
3. JSX를 사용하고 싶을 때

기본 예제로 알아보기

간단한 컴포넌트를 render function으로 구현해보자:

import { h } from 'vue'

const SimpleComponent = () => {
  return h(
    'div',
    {
      class: 'card'
    },
    [
      h(
        'header',
        {
          class: 'card-header'
        },
        '안녕하세요!'
      )
    ]
  )
}

 

여기서 h() 함수는 세 가지 인자를 받는다:

1. HTML 태그 이름이나 컴포넌트
2. 속성들 (props, 이벤트 리스너, 클래스 등)
3. 자식 노드들

JSX로 더 쉽게 작성하기

일반 JavaScript로 render function을 작성하면 조금 복잡해 보일 수 있다. 이때 JSX를 사용하면 더 직관적으로 작성할 수 있다:

const SimpleComponent = () => {
  return (
    <div class="card">
      <header class="card-header">안녕하세요!</header>
    </div>
  )
}

 

JSX를 사용하려면 Babel 플러그인(예: babel-plugin-jsx)을 설정해야 한다는 점을 기억하자.

Functional Components

상태가 없는 간단한 컴포넌트는 Functional Component로 만들 수 있다:

function SimpleCard(props) {
  return (
    <div class="card">
      <header class="card-header">{props.message}</header>
    </div>
  )
}

export default SimpleCard

 

Functional Component는:

• 순수 함수처럼 동작한다
• props를 입력받아 Virtual Node를 출력한다
• 내부 상태를 가지지 않는다

마무리

Render Function은 JavaScript를 사용해 프로그래밍 방식으로 컴포넌트를 구축할 수 있게 해준다. 하지만 일반적인 상황에서는 template 문법을 사용하는 것이 더 간단하고 직관적이다. 복잡한 동적 렌더링이나 특별한 커스터마이징이 필요한 경우에만 Render Function 사용을 고려하면 된다!

대부분의 경우 template을 사용하는 것이 더 쉽고 명확하니, render function은 정말 필요한 경우에만 사용하자. 처음에는 이해하기 어려울 수 있지만, 특별한 상황에서는 매우 유용한 도구가 될 수 있다.