웹/React, Vue

[Vue]Vue 기초/CLI/Component

stubborngastropod 2023. 5. 9. 17:37
728x90

Vue.js

  • Web App: 웹 브라우저에 실행되는 어플리케이션 소프트웨어
  • SPA(Single Page Application): 서버에서 최초 1장의 HTML만 전달받아 모든 요청에 대응하는 방식, CSR 방식으로 요청을 처리
  • CSR(Client Side Rendering): 각 요청에 대한 댕응을 JS를 사용해 필요한 부분만 다시 렌더링. 필요한 페이지를 서버에 AJAX로 요청하고 서버는 화면을 그리기 위해 필요한 데이터를 JSON 방식으로 전달. 이후 JSON 데이터를 JS로 처리해서 DOM 트리에 반영
  • MVVM Pattern: 소프트웨어 아키텍처 패턴의 일종. GUI(View)의 개발을 BE(Model)로부터 분리시켜 Vie가 특정한 모델 플랫폼에 종속되지 않도록 함

Vue instance

  • el: vue instance와 DOM을 연결(mount)하는 옵션. HTML id 혹은 class와 마운트
  • data: vue instance의 데이터 객체 혹은 인스턴스 속성. 데이터 객체는 반드시 기본 객체인 {}여야 함. 정의된 속성은 interpolation({{}})을 통해 view에 렌더링
  • methods: vue instance의 method들을 정의. arrow function 사용하면 안됨

advanced

  • methods: 호출될 때마다 함수를 실행, 같은 결과라도 매번 새롭게 계산
  • computed: 함수 종속 대상의 변화에 따라 계산 여부 결정, 종속 대상이 그대로면 항상 캐싱된 값을 반환
  • watch: 특정 데이터의 변화 감지. Array, Object의 내부 요소 변경 감지를 위해서는 deep 속성 추가 필요
  • filters: 텍스트 형식화를 적용할 수 있는 필터. interpollation이나 v-bind 이용 시 사용 가능하며 JS 표현식 마지막에 |와 함께 추가, 이어서 사용하는 chaining 가능

Directives

: --> 전달인자를 받을 수 있음

. --> directive를 특별한 방법으로 바인딩

v-text {{}}와 동일한 역할

v-html RAW HTML을 표현, 사용하지 않음

v-show 표현식 값에 따라 element를 보여줄 것인지 결정, boolean 값이 변경될 때마다 반응. 요소 자체는 항상 DOM에 렌더링됨

v-if v-show와 동일하나 값이 false인 경우 DOM에서 사라짐. v-if v-else-if v-else 형태로 사용. false인 경우 초기 렌더링 비용이 v-show보다 낮을 수 있지만 렌더링이 잦다면 비용이 증가할 수 있음

v-for for (char, index) in의 형식으로 작성. v-for 사용 시 반드시 key 속성을 각 요소에 작성

v-on :를 통해 전달받은 인자를 확인. 대기하고 있던 이벤트 발생 시 할당된 표현식 실행. @로 대체 가능

v-bind HTML 기본 속성에 vue data를 연결. :로 대체 가능    

v-model vue instance와 DOM의 양방향 바인딩. vue data 변경 시 v-model로 연결된 사용자 입력 element에도 적용됨

Vue CLI

Vue 개발을 위한 표준 도구, 프로젝트 구성을 도와주며 확장 플러그인/GUI/Babel 등 다양한 tool을 제공함

  • Node.js: 브라우저가 아닌 환경에서도 JS를 구동할 수 있는 런타임 환경
  • NPM(Node Package Manage): JS 패키지 관리자. pip와 마찬가지로 다양한 의존성 패키지 관리

기본 프로젝트 구조는 node_modules, web pack, babel, bundler, package, src 등을 포함

Component

UI를 독립적이고 재사용 가능하도록 기능별로 분화한 것. src/App.vue를 root node로 하는 tree의 구조를 가짐

Component based architecture --> 관리가 용이, 재사용, 확장, 캡슐화, 독립성

  • SFC(Single File Component): 하나의 .vue 파일이 하나의 vue instance이며 하나의 컴포넌트. vue instance에서 HTML, CSS, JS 코드를 한번에 관리함
<template>
</template>

<script>
</script>

<style>
</style>

Pass Props

요소의 속성을 사용해 데이터 전달, props는 부모 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성. 자식 컴포넌트는 props 옵션을 사용해 수신하는 props를 명시적으로 선언

<!-- MyComponent.vue -->

<template>
  <div class='border'>
    <MyChild static-props="component에서 child로"/>
  </div>
</template>

<!-- MyChild.vue -->
<template>
  <div class='border'>
    <p>{{ static Props }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyChild',
  props: {
    staticProps: String
  }
}
</script>

부모에서 자식으로의 data 전달을 pass props라고 하며 kebab-case를 사용해 data-name="value"의 형태로 전달

자식 컴포넌트에서는 props를 type과 함께 명시하며 camelCase를 사용

  • 단방향 데이터 흐름: 모든 props는 부모에서 자식 방향으로의 단방향 바인딩을 형성. 하위 컴포넌트가 상위 컴포넌트 상태를 변경해 앱의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지

Emit Event

부모-자식 컴포넌트 데이터 전달 시 이벤트 발생

  1. 데이터를 이벤트 리스너의 콜백함수 인자로 전달
  2. 상위 컴포넌트는 해당 이벤트를 통해 데이터를 받음

$emit('event-name') 형식으로 emit 메서트를 통해 부모 컴포넌트에 event-name이 발생했음을 알림

HTML: kebab-case, JS: camelCase로 암기

Lifecycle Hooks

컴포넌트의 생애주기를 관리할 수 있도록 하는 인스턴스의 생성, 갱신, 제거 시 발생하는 이벤트에 대한 콜백 함수

  • beforeCreate: 인스턴스 생성 전에 호출. data나 methods 등의 속성이 아직 생성되지 않은 상태
  • created: 인스턴스 생성 후 호출, data나 methods 등의 속성에 접근 가능
  • beforeMount: 인스턴스 마운트 전 호출, 템플릿이 아직 렌더링되지 않은 상태
  • mounted: 인스턴스 마운트 후 호출, 템플릿이 렌더링되어 접근 가능
  • beforeUpdate: 인스턴스 업데이트 전 호출, 데이터 변경 전 상태 접근 가능
  • updated: 인스턴스 업데이트 후 호출, 데이터 변경 후 상태 접근 가능
  • beforeDestroy: 인스턴스 제거 전 호출
  • destroyed: 인스턴스 제거 후 호출
// lifecycle hook
Vue.component('example', {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  created() {
    console.log('created: ', this.message)
  },
  mounted() {
    console.log('mounted: ', this.message)
  }
})
728x90