hyf0/vue-jsx-best-practices

vue-jsx-best-practices은(는) 무엇을 하나요?

Vue에서 JSX를 사용할 때 알아야 할 모범 사례와 함정을 정리한 가이드입니다.

주요 주제

1. 속성 이름: class vs className

Vue 템플릿에서는 class를 사용하지만, JSX에서는 JavaScript 속성 이름 규칙을 따르므로 className을 사용해야 합니다.

// 올바른 예
<div className="container">Hello</div>

// 잘못된 예
<div class="container">Hello</div>

2. JSX 플러그인 설정

Vite 기반 프로젝트에서 JSX를 사용하려면 @vitejs/plugin-vue-jsx 플러그인이 필요합니다.

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()],
})

3. 동적 속성 바인딩

Vue 템플릿의 :prop 문법과 달리, JSX에서는 일반 JavaScript 표현식을 사용합니다.

// 템플릿: <div :class="dynamicClass">
// JSX:
<div className={dynamicClass}>

4. 이벤트 핸들링

이벤트는 on 접두사와 함께 camelCase로 작성합니다.

<button onClick={handleClick}>Click me</button>

// 네이티브 이벤트 수식어가 필요한 경우
<button onClick={(e) => { e.preventDefault(); handleClick() }}>Submit</button>

5. 조건부 렌더링

{isVisible && <div>Visible</div>}
{isActive ? <span>Active</span> : <span>Inactive</span>}

6. v-model 대체

// v-model에 해당
<input value={inputValue} onInput={e => handleInput(e.target.value)} />

자세한 내용은 공식 Vue JSX 문서를 참고하세요.