실전 코드로 배우는 Vue.js

254

실전 코드로 배우는 Vue.js

}

const app = createApp(App)

app.mount("#app")

7.1.3

렌더 함수와 자바스크립트

XML

JSX

(자바스크립트

XML

)는 자바스크립트 안에서

HTML

코드를 작성할 수 있도록 리액트

프레임워크가 도입한 자바스크립트 확장이다.

JSX

는 다음과 같은 형식으로

HTML

과 자바스

크립트 코드를 함께 작성한다.

3

const JSXComp = <div>This is a JSX component</div>

이 코드는 ‘

This

is

a

JSX

component

’라는 텍스트가 담긴

div

태그 렌더 컴포넌트다. 이 컴

포넌트를 다음과 같이

render

()

함수에서 그대로 사용할 수 있다.

import { createApp, h } from 'vue'

const JSXComp = <div>This is a JSX component</div>

const App = {

render() {

return JSXComp

}

}

const app = createApp(App)

app.mount("#app")

3

JSX

를 인식하는 간단한 방법은 .

ts

가 아닌 .

tsx

파일에 코드를 작성하는 것이다. (예:

main

.

tsx

)

255

CHAPTER 07

고급 렌더링, 동적 컴포넌트,플러그인 구성

Vue

3

.

0

은 기본적으로

JSX

를