Do it Vue.js 입문 및 구글링을 통해 정리한 내용입니다.

Vue 인스턴스

뷰 인스턴스(instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위입니다.

요 아래 세가지 방법이 뷰 인스턴스를 생성하는 방법입니다.

new Vue({
	el: ‘태그이름’,
	data: {
    	something: '어떤 것'
    }
})

인스턴스 안에 el 속성을 통해 뷰 인스턴스가 그려질 지점을 지정하고, data 속성에 화면에 보여질 데이터를 정의하고 html 태그에 대충

<div id="태그이름">
	{{something}}
</div>

이렇게 하면 화면에 어떤 것 이라고 뜰거에요.

Vue.component(‘태그이름’,{
	data: {
    }
})
<script>
	module.exports = {
    	name: '태그이름'
		data () {
			return {
				key: value
			}
		}
}
</script>

뷰 인스턴스 생성자

new Vue() 로 인스턴스를 생성할때 Vue를 생성자라고 합니다.
Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있습니다.
생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서입니다.

뷰 인스턴스 옵션 속성

뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미합니다. 위에서 설명한 el속성도 미리 정의 되어있고, 뷰로 만든 화면이 그려지는 시작점을 의미합니다.

뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야 합니다. 돔 요소를 선택할때는 CSS 선택자 규칙과 똑같이 사용합니다.

이외에도 template, methods, created 등 미리 정의되어 있는 속성을 사용할 수 있습니다.

  • name : 컴포넌트 이름 정의

  • template: 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있습니다.

  • method: 화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작에 관련된 로직을 추가할 수 있습니다.

  • created: 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성. 부 인스턴스 라이프 사이클로 검색하면 자세히 알 수 있습니다.

뷰 인스턴스의 유효범위

인스턴스의 유효범위란?
뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타납니다. 이를 인스턴스의 유효 범위라고 합니다. 다음 절에서 다루는 지역 컴포넌트와 전역 컴포넌트의 차이점을 이해하기 위해서도 꼭 알아야 하는 개념이며, 인스턴스의 유효범위는 el 속성와 밀접한 관계가 있습니다.

인스턴스가 생성된 후 화면에 어떻게 적용되는지 알아야 합니다.
new Vue()로 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성을 적용하는 과정은 다음과 같습니다.

뷰 라이브러리 파일 로딩 ->
인스턴스 객체 생성 ->
특정 화면 요소에 인스턴스를 붙임 ->
인스턴스 내용이 화면 요소로 변환 ->
변환된 화면 요소를 사용자가 최종 확인
예를 들어 , {{somthing}}어떤 것으로 화면이 찍히겠죠.

뷰 인스턴스 라이프 사이클

왜 알아야 하냐면요
인스턴스의 상태에 따라 호출할 수 있는 메서드들이 있습니다.
뭔가를 할 수 있다는 얘기죠.

순서대로

  • new Vue()
  • 이벤트 및 라이프 사이클 초기화
  • beforeCreate
  • 화면에 반응성 주입
  • created
    이때 data, methods 속성이 정의되기 때문에 네트워크를 통해 데이터를 fetch해올 수 있습니다. 돔 요소로는 접근할 수 없습니다.
  • el, template 속성확인
  • beforeMount
  • template 속성 내용을 render()로 변환
    자바스크립트로 화면의 돔을 그리는 함수입니다.
  • mounted
  • $el 생성 후 el 속성 값을 대입
  • 인스턴스를 화면에 부착
  • 인스턴스의 데이터 변경
  • beforeUpdate
  • 화면 재 렌더링 및 데이터 갱신
  • updated
  • 인스턴스 내용 갱신
  • 인스턴스 접근 가능
  • beforeDestroy
  • 컴포넌트, 인스턴스, 디렉티브 등 모두 해제
  • destroy
  • 인스턴스 소멸

인스턴스를 화면에 부착 - 인스턴스 내용 갱신 구간은
데이터가 변경되는 경우에만 거친다네요.

뷰 라이프사이클 다이어그램

뷰 컴포넌트

컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미하고, 화면의 영역을 쪼개서 재활용 할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리합니다.

v-model이란?

입력폼하고 데이터를 연결시켜줍니다.
react에서는 value값과 onchange를 state에 바인딩 해주는 작업을 했는데요.

v-model을 사용함으로써 위 작업을 대신 해주나봐요.

배열을 쓰면 여러 값을 push pop 하는거 같네요.

https://kr.vuejs.org/v2/guide/forms.html

vue.js dollar sign 의미가 뭐지?

https://stackoverflow.com/questions/56881724/vue-js-meaning-of-the-dollar-prefix

vue.js $set

https://kr.vuejs.org/v2/guide/reactivity.html

computed 속성

템플릿 내에서 표현식 처리하지 않고, computed 에서 로직을 구현하고,
메서드로 묶어서 getter를 템플릿 머스태치 {{ message }} 안에 넣어주면 가독성 높이고 유지보수도 잘되겠죠.

<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    // 계산된 getter
    reversedMessage: function () {
      // `this` 는 vm 인스턴스를 가리킵니다.
      return this.message.split('').reverse().join('')
    }
  }
})

computed 속성의 캐싱 vs 메서드

그럼 그냥 메서드만드는거랑 computed 안에 메서드 두는거랑 뭔 차이죠?

차이점은 computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것

computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행합니다. 즉 message가 변경되지 않는 한, computed 속성인 reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환합니다.

레퍼런스 : computed 와 watch - Vue.js

Vuex

컴포넌트간 데이터 공유를 편하게 하기 위한 패턴이자 라이브러리

개념들
store, state, getters, mutations, actions

Redux를 접해봤기 때문에 이해하기는 편했고,
개인적으로는 vuex 훨씬 편한거 같습니다.

store : vue인스턴스의 속성, 컴포넌트간 공유데이터를 저장할 객체

getters, mutations, actions를 .vue에서 편하게 쓰기 위해 주어진 helper 메서드
mapGetters, mapMutations, mapActions, 또한 helper 메서드를 computed에서 사용하실때는
spread operator를 써야합니다. 그 이유는 아직 이해를 못해서 받아들였습니다.
그 이유는 mapState 등 각 helper 메서드가 객체를 반환하기 때문입니다.
여기서 확인해보면 됩니다.

  • mutations : state( store에서 관리할 데이터 )값을 변경하는 로직을 구현합니다.
    왜 쓰냐면 여러 컴포넌트에서 데이터를 변경할텐데, 직접 컴포넌트에서 state(공유데이터)값을 변경하지 않고, 데이터 변경을 추적하기 위해서 vuex에서 데이터 변경메서드를 만들어 놓고 이 메서드를 각 컴포넌트에서 호출하는 방식입니다.

  • actions : mutation이 있는데 왜 action? 데이터를 변경하는 방법이 동기적으로도 변경 되겠지만, 비동기적인 방법으로도 데이터의 변경이 일어날 수 있습니다. 예를 들어 http methods 등을 통한 네트워크를 타는 방식 혹은 setTimeout같은 것을 사용할때 입니다. 이런 비동기적인 수정도 추적하기 위해서 비동기로직은 actions로 분리하였고, actions에서 mutations를 호출(commit)하는 방식입니다.

.vue 파일에서는 actions를 통해 비동기적으로 state(공유 데이터)를 변경(dispatch) ->
actions들은 미리 정의된 비동기 로직에 따라 공유데이터를 변경할(commit)할 mutations를 호출 ->
mutations메서드에서 state(공유데이터)가 변경되는 방식입니다.

https://joshua1988.github.io/web-development/vuejs/vuex-start/

Vuex 사용하면서 각각의 state, getter, mutations, actions등 이름이 겹치면?

크게 두 가지 방법이 나와있습니다.

  1. 메서드명을 상수화시킵니다.
    getter, mutations, actions에서 사용하면 메서드의 이름이 겹치면요?

예를 들어 , getters-types.js에 메서드 명을 상수화시켜서 중복을 잡아내게합니다.
String이 아니기 때문에 상수를 중복으로 선언하면 컴파일러가 에러를 발생시키겠죠.

//getters-types.js
export const SOME_GETTER = 'SOME_GETTER';

//store.js
import Vuex from 'vuex';
import { SOME_GETTER } from './getters-types.js';

const store = new Vuex.store({
  state: { ... },
  mutations: {
    [SOME_GETTER] (state) {  
      return this.state.a;
    }
  }
});

아래 영역 이해안되시면 여기 보시면 됩니다. computed property names 라고 합니다.

[SOME_GETTER] (state) {  
      return this.state.a;
    }
  1. 모듈화 합니다.
    https://vuex.vuejs.org/kr/guide/modules.html

vuex 헬퍼함수 써야하는 이유

mapState: vuex에 정의해둔 state를 vue 컴포넌트에서 사용하도록 쉽게 연결해주는 헬퍼 메서드
mapGetters: vuex에 정의해둔 getter를 쉽게 연결해주는 헬퍼 메서드
getter : state데이터에 특정한 로직을 수행한 결과를 얻을 수 있는 방법
mapMutations: vuex에 정의해둔 mutations을 vue에서 쉽게 사용하도록 연결해주는 헬퍼 메서드
mapActions : vuex에 정의해둔 actions을 vue에서 쉽게 사용하도록 연결해주는 헬퍼 메서드
https://ict-nroo.tistory.com/108

vue HOC

https://joshua1988.github.io/vue-camp/design/pattern5.html#%EB%B0%98%EB%B3%B5%EB%90%98%EB%8A%94-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A1%9C%EC%A7%81

vue 속성이나 메서드 자주 사용하는것

vue API 페이지가 존재합니당.
https://kr.vuejs.org/v2/api/index.html#render

vue mixins 믹스인

https://joshua1988.github.io/vue-camp/reuse/mixins.html

slot

slot

<!-- ButtonTab.vue -->
<template>
  <div class="tab panel">
 
    <slot></slot>
    
    <div class="content">
      Tab Contents
    </div>
  </div>
</template>

기존에는 컴포넌트를 불러오기만 했지 컴포넌트 내부에 태그를 넣지는 않았는데요.
slot이 이를 가능하게 해줍니다.
이를 통해 컴포넌트의 특정 영역을 커스터 마이징 할 수 있게 됩니다.

<!-- TabContainer.vue -->
<template>
  <ButtonTab>
    <h1>First Header</h1> <- 
  </ButtonTab>
  <ButtonTab>
    <h1>Second Header</h1> <-
  </ButtonTab>
  <ButtonTab>
    <h1>Third Header</h1> <-
  </ButtonTab>
</template>

<script>
export default {
  components: {
    ButtonTab
  }
}
</script>

named slot

슬롯에 이름을 부여해
<template>태그나 HTML태그를 삽입할 수 있습니다.
공통으로 사용할 컴포넌트 틀을 만들고 사이사이에 내용이 slot를 통해서 다른 컴포넌트를 만들수 있습니다.

https://joshua1988.github.io/web-development/vuejs/slots/

profile
서로 아는 것들을 공유해요~

0개의 댓글