Vue.js란?
Vue(뷰)는 사용자 인터페이스를 구축하기 위한 프로그레시브 JavaScript 프레임워크입니다. "프로그레시브"란 필요한 만큼만 점진적으로 도입할 수 있다는 의미입니다. Vue는 React와 Angular의 장점을 결합한 프레임워크로, 학습 곡선이 완만하고 문서화가 잘 되어 있어 입문자에게 특히 추천됩니다.
Vue 3 핵심 개념
컴포넌트 구조 (SFC)
Vue 컴포넌트는 template(HTML), script(로직), style(CSS) 세 부분으로 구성됩니다. 이 구조를 SFC(Single File Component)라고 합니다. 하나의 .vue 파일 안에 HTML, JavaScript, CSS가 모두 들어있어 직관적입니다.
반응성 (Reactivity)
Vue의 핵심은 반응성 시스템입니다. 데이터가 변경되면 화면이 자동으로 업데이트됩니다. ref()로 단일 값의 반응성 변수를, reactive()로 객체의 반응성을, computed()로 계산된 값을 만듭니다.
디렉티브 (Directives)
Vue는 HTML에 특별한 속성(디렉티브)을 추가하여 동적 동작을 구현합니다.
- v-bind (:) — HTML 속성을 동적으로 바인딩
- v-on (@) — 이벤트를 바인딩. @click="handleClick" 형태
- v-if / v-else — 조건부 렌더링
- v-for — 리스트 렌더링
- v-model — 양방향 데이터 바인딩
React와의 비교
| 기능 | React | Vue |
|---|---|---|
| 상태 관리 | useState | ref() / reactive() |
| 계산된 값 | useMemo | computed() |
| 부수 효과 | useEffect | watch() / watchEffect() |
| 조건부 렌더링 | 삼항연산자 / && | v-if / v-else |
| 리스트 렌더링 | .map() | v-for |
| 이벤트 | onClick | @click |
| 양방향 바인딩 | value + onChange | v-model |
| 스타일 스코프 | CSS Modules | scoped style (기본 제공) |
Props와 Emit
Props (부모 → 자식) — defineProps()로 부모로부터 받을 데이터의 타입과 기본값을 정의합니다. required와 default 옵션을 사용할 수 있습니다.
Emit (자식 → 부모) — defineEmits()로 부모에게 이벤트를 전달합니다. emit('update', newValue) 형태로 사용합니다.
생명주기 훅
Vue 3 Composition API의 생명주기 훅:
- onMounted() — 컴포넌트가 DOM에 마운트된 후
- onUpdated() — 반응성 데이터 변경으로 DOM이 업데이트된 후
- onUnmounted() — 컴포넌트가 DOM에서 제거될 때
Vue를 직접 연습해보고 싶다면 Compit의 Vue 챌린지에 도전해보세요!