Vue2 기초 개념 완벽 가이드 😎

안녕하세요! 오늘은 Vue2의 핵심 기초 개념들을 쉽고 재미있게 설명해드리려고 해요. 프론트엔드 개발의 매력적인 세계로 함께 떠나볼까요?

Vue2란 무엇인가요? 🤔

Vue2는 사용자 인터페이스를 만들기 위한 JavaScript 프레임워크예요.
마치 레고 블록처럼 웹 애플리케이션을 조립할 수 있게 해주는 도구라고 생각하면 됩니다!

핵심 특징 ⭐

• 점진적 도입 가능: 기존 프로젝트에 부분적으로 적용 가능
• 반응형 데이터: 데이터가 변경되면 화면이 자동으로 업데이트
• 컴포넌트 기반: 재사용 가능한 UI 조각들을 만들 수 있음

Vue 인스턴스 생성하기 🎯

const app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요!'
  },
  methods: {
    sayHi() {
      alert(this.message)
    }
  }
})

핵심 문법 요소 📝

1. 데이터 바인딩

<!-- 텍스트 바인딩 -->
<div>{{ message }}</div>

<!-- 속성 바인딩 -->
<img v-bind:src="imageUrl">
<!-- 축약형 -->
<img :src="imageUrl">

2. 디렉티브 사용하기

<!-- 조건부 렌더링 -->
<p v-if="seen">이제 나를 볼 수 있어요</p>

<!-- 반복 렌더링 -->
<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

<!-- 이벤트 핸들링 -->
<button v-on:click="doSomething">클릭하세요</button>
<!-- 축약형 -->
<button @click="doSomething">클릭하세요</button>

3. computed와 watch 🔄

export default {
  data() {
    return {
      firstName: '길동',
      lastName: '홍'
    }
  },
  computed: {
    // 계산된 속성
    fullName() {
      return this.lastName + ' ' + this.firstName
    }
  },
  watch: {
    // 데이터 감시
    firstName(newValue, oldValue) {
      console.log('이름이 변경되었습니다:', oldValue, '->', newValue)
    }
  }
}

컴포넌트 시스템 🎨

1. 컴포넌트 등록

Vue.component('my-component', {
  template: '<div>커스텀 컴포넌트입니다!</div>'
})

2. Props 전달

Vue.component('child', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
})

<child message="안녕하세요!"></child>

3. 이벤트 발신

// 자식 컴포넌트
methods: {
  notify() {
    this.$emit('alert', '자식이 부모에게 알립니다!')
  }
}

// 부모 컴포넌트
<child @alert="handleAlert"></child>

생명주기 훅 🌱

export default {
  beforeCreate() {
    console.log('인스턴스 초기화 전')
  },
  created() {
    console.log('인스턴스 생성됨')
  },
  mounted() {
    console.log('DOM에 마운트됨')
  },
  updated() {
    console.log('데이터 변경으로 재렌더링됨')
  },
  destroyed() {
    console.log('인스턴스 제거됨')
  }
}

실전 사용 예시 💫

new Vue({
  el: '#todo-app',
  data: {
    newTodo: '',
    todos: []
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodo
        })
        this.newTodo = ''
      }
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
})

주의사항 ⚠️

1. 반응형 한계

   • 객체의 새로운 속성 추가/삭제 시 Vue.set/Vue.delete 사용 필요
   • 배열 인덱스로 직접 수정 시 반응형 동작 안 함

2. Props 변경

   • props는 단방향 데이터 흐름을 따름
   • 직접 수정하지 말고 이벤트를 통해 부모에게 알려야 함

성능 최적화 팁 🚀

1. v-show vs v-if

   • 자주 토글되는 요소는 v-show 사용
   • 조건이 거의 변경되지 않으면 v-if 사용

2. key 속성 활용

   • v-for 사용 시 항상 고유한 key 지정
   • DOM 재사용 최적화에 도움

---

참고자료:

• Vue.js 공식 문서
• Vue.js 스타일 가이드
• Vue.js 예제
• Vue.js GitHub