• 프런트엔트 프레임워크

뷰의 특징

ui 화면단 라이브러리

MVVM 패턴의 뷰 무델에 해당하는 화면단 라이브러리
모델 - 뷰 - 뷰모델로 구조화 하여 개발하는 방식
뷰: 사용자에게 보이는 화면
돔: html 문서에 들어가는 요소의 정보를 담고 있는 데이터 트리
돔 리스터: 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
모델: 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩: 뷰에 포시되는 내용과 모델의 데이터를 동기화
뷰 모델: 뷰와 모델의 중간영역. 돔 리스너와 데이터 바인딩을 제공하는 영역
MVVM 패턴은 마크업 언어나 gui 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴

컴포넌트 기반 프레임워크

• 컼포넌트란? 각 영역을 컴포넌트로 지정하여 구문

리액트와 앵귤러의 장점을 가짐

• 앵귤러의 양방향 데이터 바인딩,
  ㄴ 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말한다.
• 리액트의 단반향 데이터 흐름의 장점을 모두 결합함.
  ㄴ 컴포넌트 간 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 구조화

인스턴스 & 컴포넌트

뷰 인스턴스 생성자

new Vue() 로 인스턴스를 생성할때 Vue를 생성자라고함.
사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함이다.

뷰 인스턴스 옵션 속성
el 속성 역시 미리 정의 되어 있으며 뷰로 만든 화면이 그려지는 시작점
아래것들도 마찬가지로 미리 정의되어 있는 속성을 사용한다.

• template : html, css 등 마크업 요소를 정의하는 속성
• mothods: 화면 로직과 관련된 메서드
• created: 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성

뷰 인스턴스 유효 범위

뷰 라이브러리 파일 로딩 -> 인스턴스 객체 생성 -> 특정 화면 요소에 인스턴스를 붙임 -> 인스턴스 내용이 화면 요소로 변환 -> 변환된 화면 요소를 사용자가 최종 확인

el 속성으로 지정한 태그 아래에 요소들로 제한된다.

뷰 인스턴스 라이프 사이클

• 라이플 사이클 속성: 인스턴스의 상태에 따라 호출할 수 있는 속성들
• 라이플 사이클 훅: 각 라이플 사이클 속성에서 실행되는 커스텀 로직

생성

: 인스턴스의 생성

1. beforeCreate
   돔과 같은 화면요소에도 접근할 수 없음

2. created
   data 속성과 methods속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있다.
   다만, 인스턴스가 화면에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없다.
   서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다.

3. beforeMount
   template 속성에 지정한 마크업 속성을 reder()함수로 변환 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전에 호출된다.

4. mounted
   el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계, template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계이다.
   하지만 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html 코드로 변환되는 시점과 다를 수 있다.

부착

: 인스턴스를 화면에 부착

1. beforeUpdate
   el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다.
   치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시한다.
   변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 넣을 수 있다.

2. updated
   데이터가 변경된 후 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
   데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다.
   이 단계에서 데이터 값을 변경하면 무한루프에 빠질 수 있으므로 computed, watch와 같은 속성을 사용해야한다.

갱신

: 화면에 부착된 인스턴스의 내용이 갱신

1. beforeDestroy
   뷰 인스턴스의 데이터를 삭제하기 좋음
2. destroyed
   뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴됨.

소멸

: 인스턴스가 제거됨

mouted에서 돔에 데이터 값을 변경하면 updated가 실행됨
created에서 값 변경하면 updated가 실행 안됨. 단, 화면에 값은 변함

뷰 컴포넌트

컴포넌트의 이름은 Html 사용자 정의 태그를 의미한다.
뷰 라이브러리 파일 로딩 -> 뷰 생성자로 컴포넌트 등록 -> 인스턴스 객체 생성 -> 특정 화면 요소에 인스턴스 부착 -> 인스턴스 내용 반환 (등록된 컴포넌트 내용도 변환, 커스텀 태그가 div로 변환됨)-> 사용자가 화면 확인

전역 컴포너느

Vue.component('my-component'. {template: '<div>asdf</div>'}

지역 컴포넌트 등록

new Vue({components: {'컴포넌트 이름': 컴포넌트 내용}

이 두개의 차이는?
유효 범위가 다르다. 생성자 내의 el값에 영향을 받는다.

뷰 컴포넌트 통신

각각의 고유한 범위를 가지고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없다.
컴포넌트 데이터 전달 방밥은 상위-하위 컴포넌트 간의 데이터 전달 방법이다.
상위에서 하위로는 props라는 특별한 속성을 전달한다.
그리고 하위에서는 상위로는 기본적인 이벤트만 전달 할 수 있다.

상위에서 하위 컴포넌트로 데이터 전달하기

props 속성 사용

하위에서 상위

이벤트를 발생시켜 상위 컴포넌트에 신호를 보낸다. (event emit)
this.$emit('이벤트명');
<child-component v-on: 이벤트명="상위 컴포넌트 메서드명"> < /child-component>
하위 컴포넌트에서 상위 컴포넌트로 신호를 올려보내면 상위 컴포넌트의 메서드를 실행할 수도 있고 하위 컴포넌트로 내려보내는 Props의 값을 조정할 수도 있다.

같은 레벨

옆 컴포넌트에 전달하려면 하위에서 공통 상위 컴포넌트로 이벤트를 전달한 후 공통 상위 컴포넌트에서 2개의 하위 컴포넌트에 props를 내려 보내야한다.

그러면 강제로 상위 컴포넌트를 둬야하잖아 그래서 생긴게 이벤트 버스다
이벤트 버스는 개발자가 지정한 2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법이다.

이벤트 ㅂ스로 사용할 새 인스턴스 1개를 생성하고 $emit 과 $on으로 받으면 된다.

이거 사용하면 직접 데이터 전달할 수 있어 편리하지만 헷갈린다.
이것을 해결하기 위해 vuex라는 것이 있다!!