[Vue] Vue란 무엇인가?

오리통통·2024년 10월 31일

vue

Vue

목록 보기

1/11

📚 이번 포스팅에서는 vue에 대해서 알아보도록 하자.

1. Vue란?

사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크

2. Vue의 장점

1) 낮은 학습 곡선

간결하고 직관적인 문법을 가지고 있어 빠르게 익힐 수 있고

잘 정리된 문서를 기반으로 어렵지 않게 학습할 수 있다.

2) 확장성과 생태계

다양한 플러그인과 라이브러리를 제공하는 높은 확장성을 가지고 있고, 전세계적으로 활성화된 커뮤니티를 기반으로 많은 개발자들이 새로운 기능을 개발하고 공유하고 있다.

3) 유연성

작은 규모의 프로젝트부터 대규모의 애플리케이션까지 다양한 프로젝트에 적합하고 기존 프로젝트에 쉽게 통합될 수 있다.

4) 성능

가볍고 빠른 성능을 제공해 단일 페이지 애플리케이션 (SPA) 개발에 적합하다.

3. Vue의 2가지 핵심 기능

1) 선언적 렌더링 (Declarative Rendering)

표준 HTML을 확장하는 Vue "템플릿 구문"을 사용하여 JavaScript 상태(데이터)를 기반으로 화면에 출력될 HTML을 선언적으로 작성한다.

2) 반응성 (Reactivity)

JavaScript 상태 변경을 추적하고, 변경사항이 발생하면 자동으로 DOM을 업데이트한다.

4. Vue 사용하기

1) CDN 방식

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2) 'NPM' 설치 방식

$ npm install vue

$ npm install -g @vue/cli

$ vue create my-project

$ cd my-project

$ 	npm run serve

5. ref 함수

1) .value 속성이 있는 ref 객체로 래핑(wrapping)하여 반환하는 함수

2) ref로 선언된 변수의 값이 변경되면, 해당 값을 사용하는 템플릿에서 자동으로 업데이트

3) 인자는 어떠한 타입도 가능

4) 템플릿의 참조에 접근하려면 setup 함수에서 선언 및 반환 필요

5) 편의상 템플릿에서 ref를 사용할 때는 .value를 작성할 필요 없음 (automatically unwrapped)

ref 객체가 필요한 이유?

Vue는 템플릿에서 ref를 사용하고 나중에 ref의 값을 변경하면 자동으로 변경 사항을 감지하고 그에 따라 DOM을 업데이트한다.("의존성 추적 기반의 반응형 시스템")

Vue는 렌더링 중에 사용된 모든 ref를 추적하며, 나중에 ref가 변경되면 이를 추적하는 구성 요소에 대해 다시 렌더링한다.

이를 위해서 참조 자료형의 객체 타입으로 구현한다.

6. Vue 예시

// 생략 
<body>
  <div id="app">
    <h1> {{ message }} <h1>
  <div>
</body>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
  const { createApp, ref } = Vue 

  const app = createApp({
    setup() { 
      const message = ref('hello vue!')
      
      return {
        message
      }
   }
})
app.mount('#app')
</script>