[Vue 스터디 #1] 컴포넌트, 환경구성, 라이프 사이클 훅, setup

Vue.js #1

Vue 란?

• Vue 는 User Interface 개발을 위한 자바스크립트 프레임워크
• HTML, CSS, JavaScript를 기반으로 복잡한 UI 까지 개발 가능
• 핵심기능
  • 선언적 렌더링 (Declarative Rendering) : 템플릿 구문{{데이터}}을 활용하여 출력
  • 반응성 (Reactivity) : JS 상태 변경을 자동으로 추적 및 변경시, DOM을 효율적으로 업데이트

컴포넌트

• UI 를 재사용할 수 있도록 정의한 것
  • JS 뿐 아니라 HTML, CSS 도 캡슐화 하여 재사용 가능
• 컴포넌트 만드는 법 : 정의 -> 등록 -> 사용

컴포넌트 정의

• 문자열 템플릿 : HTML, CSS, JS를 string 으로 선언
• Single File Component (SFC) : 빌드 도구(Webpack, Vite)를 활용하여 .vue 확장자로 정의

Single File Component (SFC)

• 구성요소
  • template
  • script
  • style

    <template>
    /* HTML 및 데이터 사용  */
    <p>{{data1}}</p>
    </template> 
    

### 컴포넌트 등록
> 어디에서 사용하냐에 따른 등록 방법 

* 전역 등록 (Global) - 자주 사용하지 않음 : `app.component` 를 이용하여 등록시, 전역 등록 
* 지역 등록 (Local)  : `components` 속성 안에 정의 
```javascript
const app = createApp({
  components: {
    BookComponent : BookComponent
  }
})

컴포넌트 사용

• template 단에서 사용
• PascalCase 로 등록된 컴포넌트는 PascalCase, kebab-cased 로 둘다 사용 가능
  • 주로 PascalCase 사용
  • <BookComponent></BookComponent> = <book-component></book-component>

환경구성

• CDN : 간단하게 활용할때 사용
  • <script src="https://unpkg.com/vue@next"></script>
• npm : 대규모 어플리케이션 구성할때 사용
• Vite(비트) : Vue SFC를 지원 하고 매우 가벼운 빌드 도구
  • 소스코드 변경시, 변경된 모듈만 교체하기때문에 빠르다고 표현 (전체 모듈을 번들링 하지 않음)

Composition API

• 옵션을 선언하는 대신 가져온 함수(ref, onMounted ...)를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트
• Options API 대신 사용하는 이유
  • 관심사 끼리 그룹핑 가능
  • 코드의 재사용성
    • Composable 함수의 형태로 로직 재사용가능
• 용어 정리
  • 반응형 API (Reactivity API) : ref(), reactive() 사용 -> reactive status, computed status, watchers
  • 라이크 사이클 훅 (Life Cycle Hook) : onMounted(), onUnmounted() 사용
  • 종속성 주입 (Dependency Injection) : provied(), inject() 사용

반응형 API

반응하는 데이터와 관련된 API 세트

<template>
    <div>
        <h2>반응형</h2>
        <p>{{ reactiveMessage }}</p>
        <button v-on:click="addReactiveMessage">Add message</button>
        <h2>일반</h2>
        <p>{{ normalMessage }}</p>
        <button v-on:click="addNormalMessage">Add message</button>
    </div>
</template>

<script>
import {ref, isRef, onUpdated, onMounted} from "vue"
export default {
  setup() {
    const reactiveMessage = ref('리액티브 메세지');
    let normalMessage = '노말 메세지'

    console.log (isRef(reactiveMessage));
    console.log (isRef(normalMessage));

    const addReactiveMessage = () => {
      reactiveMessage.value = reactiveMessage.value + '!';
    };

    const addNormalMessage = () => {
      normalMessage = normalMessage + '!';
    };

    onUpdated(()=>{
      console.log('update');
    });

    onMounted(function() {
      // `this`를 통해 컴포넌트 인스턴스에 접근할 수 없습니다.
      console.log('onMounted가 호출 되었습니다:', this)
    })

    return {
      reactiveMessage,
      normalMessage,
      addReactiveMessage,
      addNormalMessage,
    };

  },
}
</script>

<style>

</style>

라이프 사이클 훅

• 크게 4단계 : create -> mount -> update -> destroy
• 일반적으로 많이 사용 되는 훅 : onMounted, onUpdated, onUnmounted

의존성 주입

prop 드릴링을 사용하면 전달 -> 전달인데, 의존성 주입을 통하면 한번에 전달 가능

• provide() : 하위 컴포넌트에 주입(Inject)할 수 있도록 값을 제공(Provide)
• inject() : 상위 컴포넌트 또는 app.provide()를 통해 앱에서 제공(Provide)된 값을 주입(Inject)

Setup Hook

• Composition API 사용을 위한 진입점
  • create 되기도 전에 동작

간단한 사용 방법

• setup 에서 return 해야만 template 혹은 그 외 인스턴스에서도 사용가능

  <template>
  <p> 메세지 가와 : {{ message }}</p>
  </template>
  <script>
  import { inject } from 'vue';
  export default {
  setup() {
    const message = inject('key');
    return{
      message,
    }
  },
  }
  </script>

  Props 접근 (setup 첫번째 인자)

• setup의 첫번째 인자로 반응형 객체 이다
  • 구조 분해 할당 let {a,b,c} = props 하면 반응성을 잃게 됨 (= 포인터를 잃음?)
    • 구조 분해할당을 해야만 한다면 toRef(), toRefs() 사용 let {a,b,c} = toRefs(props)

Setup Context (setup 두번째 인자)

• 두번째 인자로 함수내에서 사용하는 속성을 지니고 있음
• 반응형이 아님!

export default {
  setup(props, context) {
    // 속성($attrs와 동일한 비반응형 객체)
    console.log(context.attrs)

    // 슬롯($slots에 해당하는 비반응성 개체)
    console.log(context.slots)

    // 이벤트 발생($emit에 해당하는 함수)
    console.log(context.emit)

    // Public한 속성, 함수를 외부에 노출시에 사용
    console.log(context.expose)
  }
}