vue-jsx-모범-사례은(는) 무엇을 하나요?
Vue에서 JSX 구문 사용 시 주의사항 (예: class vs className, JSX 플러그인 설정 등).
개요
Vue 3 프로젝트에서 JSX를 사용하려면 추가 설정이 필요하며, JSX와 Vue 템플릿 간의 구문 차이를 이해해야 합니다. 이 문서는 주요 차이점과 모범 사례를 설명합니다.
주요 차이점
class vs className
- Vue 템플릿:
class="my-class" - JSX:
className="my-class"
// 올바름 (JSX)
<div className="container">Hello</div>
// 잘못됨 (Vue 템플릿 구문)
<div class="container">Hello</div>
동적 클래스
// JSX에서 동적 클래스
<div className={isActive ? 'active' : 'inactive'}>Dynamic</div>
스타일 속성
// JSX에서 인라인 스타일 (객체 사용)
<div style={{ color: 'red', fontSize: '14px' }}>Styled</div>
이벤트 처리
// JSX에서 이벤트 (onClick, onChange 등)
<button onClick={handleClick}>Click me</button>
플러그인 설정
Vite 사용 시
npm install @vitejs/plugin-vue-jsx
vite.config.js:
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default {
plugins: [vue(), vueJsx()],
}
Nuxt 3 사용 시
Nuxt 3는 기본적으로 JSX를 지원합니다. nuxt.config.ts:
export default defineNuxtConfig({
vue: {
compilerOptions: {
// 필요 시 JSX 관련 옵션 추가
},
},
})
일반적인 오류 및 해결 방법
| 오류 | 원인 | 해결 방법 |
|---|---|---|
class 속성 인식 안 됨 | JSX에서는 className 사용 | className으로 변경 |
| 이벤트 리스너 오류 | Vue 템플릿의 @click은 JSX에서 onClick | onClick 사용 |
| 스타일 오류 | style 속성이 문자열이 아닌 객체여야 함 | 객체 형태로 전달 |