JavaScript 와 Vue.js 의 상관 관계

최근에 Vue.js를 공부하기 시작했습니다.

형태를 보니 JavaScript 와 명확하게 정의를 하고 싶어서 작성해봤습니다.

 

 

Vue.js는 JavaScript 프레임워크이기 때문에 JavaScript 문법을 기반으로 합니다.

Vue.js의 대부분의 코드는 JavaScript 문법과 동일하며,

Vue.js는 그 위에 템플릿 구문과 특정한 구조를 추가해서 더 쉽게 사용자 인터페이스를 구축할 수 있도록 도와줍니다.

즉, Vue.js에서 사용하는 문법은 JavaScript의 확장된 형태로 생각하면 됩니다.

 

 

Vue.js의 특성: JavaScript와의 차이점

템플릿 문법

• Vue.js에서는 HTML과 유사한 템플릿을 사용하여 UI를 정의합니다.
• 템플릿에서 JavaScript 변수를 바로 사용할 수 있지만, HTML 안에서 동적으로 렌더링하는 부분은 JavaScript와 조금 다릅니다.
• 예시: {{ message }}는 Vue의 템플릿 구문으로, JavaScript 변수를 HTML에 바인딩하는 방식입니다.
• {{ message }}는 JavaScript 문법이 아니며, Vue.js의 템플릿 바인딩 문법입니다. 

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!',
    };
  },
};
</script>

 

 

 

반응성(Reactivity) 시스템

• Vue.js는 반응성이라는 개념을 도입하여, 데이터가 변경되면 그에 따라 화면도 자동으로 업데이트됩니다.
• JavaScript에서는 DOM 요소를 직접 수정해야 하지만, Vue.js에서는 데이터만 수정하면 Vue가 자동으로 화면을 업데이트합니다.
• this.counter++는 JavaScript 문법이지만, Vue.js는 counter의 변화에 따라 자동으로 화면을 업데이트합니다.

<template>
  <div @click="incrementCounter">{{ counter }}</div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
};
</script>

 

 

컴포넌트 기반 아키텍처

• Vue.js는 컴포넌트라는 단위로 UI를 구성합니다. 각 컴포넌트는 자체적으로 데이터, 메서드, 템플릿을 가집니다. JavaScript에서는 이런 구조를 별도로 구현해야 하지만, Vue.js에서는 컴포넌트 기반 아키텍처를 사용하여 보다 효율적으로 UI를 구성할 수 있습니다.

<template>
  <child-component></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>

 

 

디렉티브(Directives)

• Vue.js는 v-if, v-for, v-bind 같은 디렉티브를 사용하여 HTML 태그의 동작을 제어합니다. 이는 JavaScript 문법과는 다르며, Vue.js만의 기능입니다.

<template>
  <div v-if="isVisible">This is visible</div>
  <div v-for="item in items" :key="item.id">{{ item.name }}</div>
</template>

 

 

싱글 파일 컴포넌트(SFC, .vue 파일)

• Vue.js에서 자주 사용되는 .vue 파일은 하나의 파일에 HTML 템플릿, JavaScript 코드, CSS 스타일을 포함하는 구조입니다. 이런 구조는 JavaScript 자체에는 없으며, Vue.js의 특별한 형식입니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  }
};
</script>

<style scoped>
div {
  color: blue;
}
</style>

 

 

---

요약

• Vue.js의 기본 문법은 JavaScript를 기반으로 하며, Vue.js에서 동작하는 대부분의 코드도 JavaScript입니다.
• 그러나 Vue.js는 자체적으로 템플릿 문법과 디렉티브, 반응성 시스템 등 JavaScript와 다른 추가적인 문법을 제공합니다.
• Vue.js의 이런 추가 문법은 주로 UI 개발을 단순화하고, 재사용 가능한 컴포넌트 기반 아키텍처를 제공하는 데 중점을 둡니다.

 

---

 

 

 

 

😊 잘못된 내용이 있다면 언제든지 댓글로 남겨주세요😊