vue 핵심 요약 정리

Vue.js 핵심 요약 정리

1. Vue.js의 주요 장점

• 낮은 진입 장벽: HTML, CSS, JS 기초만으로 시작 가능하며 문법이 매우 직관적입니다.
• SFC (Single File Component): .vue 파일 하나에 HTML(템플릿), JS(로직), CSS(스타일)를 모두 담아 관리 효율이 극대화됩니다.
• 강력한 생태계: 라우터(Vue Router)와 상태 관리(Pinia) 등 필수 도구를 공식적으로 지원하여 안정적입니다.

---

2. 핵심 문법: 디렉티브 (Directives)

HTML 태그 안에 v- 접두사를 붙여 DOM을 제어하는 Vue만의 특수 속성입니다.

• v-if / `v-show`: 조건에 따라 요소를 화면에 렌더링하거나 숨깁니다.
• v-for: 리스트 데이터를 반복하여 목록을 출력합니다.
• v-bind (:): HTML 속성(id, src, class 등)에 데이터를 동적으로 연결합니다.
• v-on (@): 클릭(@click), 입력(@input) 등 이벤트를 처리합니다.

---

3. 핵심 시스템: 반응형 (Reactivity)

데이터가 변하면 화면이 알아서 다시 그려지는 Vue 3의 심장입니다.

• ref() / `reactive()`: 데이터를 "감시 가능한 상태"로 만듭니다. 이 값이 변하면 해당 데이터를 사용하는 모든 화면이 자동으로 재렌더링됩니다.

---

4. 데이터 감시자: watch (Watchers)

특정 데이터의 변화를 지켜보고 있다가, 변경되는 순간 특정 로직을 실행하고 싶을 때 사용합니다.

• 사용 목적: 데이터가 바뀔 때마다 API 호출을 하거나, 로컬 스토리지에 저장, 혹은 복잡한 비동기 작업을 처리할 때 적합합니다.
• 특징:
• 변경 전의 값(oldValue)과 변경 후의 값(newValue)에 모두 접근할 수 있습니다.
• 단순히 화면을 바꾸는 걸 넘어, '데이터가 변했으니 무엇을 해라'라는 명령을 내릴 때 사용합니다.

---

💡 요약 : 어떤 걸 써야 할까?

1. 단순히 화면에 데이터를 보여줄 때? 👉 ref, reactive (반응형 시스템)
2. 데이터를 가공해서 새로운 결과값을 보여줄 때? 👉 computed (계산된 속성)
3. 데이터가 변할 때 외부 API를 호출하거나 복잡한 일을 시킬 때? 👉 watch (감시자)

---