실전 코드로 배우는 Vue.js

250

실전 코드로 배우는 Vue.js

동적 컴포넌트 라이브러리 등의 작업이 대표적인 사례다. 이런 경우

render

()

로 가상

DOM

을 직접 렌더링하고 가상 노드를 반환하면 템플릿 컴파일 프로세스를 건너뛸 수 있다.

7.1.1

렌더 함수

Vue

2

에서

render

()

함수는

createElement

콜백을 파라미터로 받고

createElement

에

인수를 전달한 다음 유효한

VNode

1

를 반환한다. 이러한

createElement

콜백은 일반적으

로

h

함수

2

로 표현한다.

[예제

7

-

1

]은

Vue

2

방식으로 컴포넌트를 생성하는 코드다.

예제

7-1

Vue

2

의 렌더 함수

const App = {

render(h) {

return h(

'div',

{ id: 'test-id' },

'This is a render function test with Vue'

)

}

}

다음 템플릿 코드는 이전 코드와 같은 기능을 한다.

const App = {

template: `<div id='test-id'>This is a render function test with Vue</div>`

}

1

가상 노드

2

하이퍼스크립트(

hyperscript

)를 의미하는

h

.

HTML

을 생성하는 자바스크립트 코드를 일컫는다.