예) layout: {...}, head: {...}

1. index가 변하지 않는 경우에는 key에 index를 넣어도 괜찮을 듯!

   • 예: [1, 2, 3, 4, 5] 라는 배열이 있을 때 이 배열의 원소가 계속 늘어나거나 수정만 될 때. 계속 늘어나거나 원소 값이 수정되어도 인덱스는 같으니까.

2. index가 변하는 경우에는 key에 다른 값을..

   • 예: [1, 2, 3, 4, 5, 6, 7] 라는 배열에서 만약 3이 지워지면 3에 대한 것만 업데이트 될 것 같지만 사실은 그 다음에 있는 4, 5, 6, 7의 인덱스도 바뀌기 때문에 4, 5, 6, 7 모두 다시 그려지게 됨. 불필요한 렌더링 발생

3. 그럼 무엇을 key로 사용하나...?

   • index + math.random() .. 정도..

<div>
<table-component>
 <tr>
   <td>1</td>
   <td>2</td>
 </tr>
</table-component>
</div>

• 슬롯을 사용하는 장점? slot에 들어가는 태그들에 사용되는 메소드나 데이터들은 다 부모 컴포넌트에 있다. 즉 부모 컴포넌트의 데이터, 메소드, computed 등에 접근할 수 있다는 것이 장점! -> IoC현상(inversion of control: 원래 자식 컴포넌트에서 컨트롤 되어야 했을 것들을 부모 컴포넌트에서 컨트롤한다)

export const SET_NUMBER = 'SET_NUMBER';
//위처럼 모듈로 만들어 다른 파일에서도 사용할 수 있음.
//string으로 놔두면 오타가 생길 우려가 있기 때문에 변수명으로 바꾼것.
mutations: {
    [SET_NUMBER](state, number){
      ...
    }
}

그런데 배열로된 데이터를 인덱스로 접근하여 업데이트 했는데 화면은 그대로인 경우가 있다.

이럴 때는 Vue.set 또는 this.$set을 사용하여 배열 데이터의 인덱스를 사용하여 데이터를 업데이트 하고 화면도 업데이트 되도록 할 수 있다.

import Vue from 'vue'
...
Vue.set(...)

• Frames per second : 초당 60프레임 이하면 눈에 조금 버벅거리는게 보이기 때문에 최소 초당 60 프레임 이상이 되도록 노력해야 한다.

• component render : 라이프사이클 관련 메소드들이 각 몇 번 호출되고 있는지 나온다. 컴포넌트가 하나 업데이트 되었을때 count도 하나만 올라가는지 유심히 살펴보자. 필요 이상의 숫자가 증가하면 쓸데없는 컴포넌트도 다시 렌더링 되고 있다는 뜻이다.

** 메모리 누수? 쓸데없는 것이 계속 실행되고 있거나 남아있는 것

• 다만 가장 상위 태그는 template을 사용할 수는 없다.

태그 하나가 있냐 없냐는 전체 레이아웃 구조에 영향을 줄 수 있기 때문에 태그의 유무는 중요하다.

computed는 성능과 관련이 많기 때문에 신경 쓰는 것이 좋다고 한다.

그리고 data가 바뀌면 computed도 알아서 바뀌어 다시 계산을 한다.

1. 데이터를 Observable로 변경
2. 오퍼레이터를 통해 변경 또는 추출 또는 여러 개의 Observable을 결합 또는 분리
3. 원하는 데이터를 처리할 Observer를 생성
4. Observable의 subscribe를 통해 Observer를 등록
5. Observable의 구독을 정지하고 자원을 해제

리액티브 프로그래밍의 기본 패턴

• 어떠한 동작을 하기 위해 데이터/이벤트를 Observable로 생성 -> .pipe() 메소드 안에서 필요한 오퍼레이터로 데이터를 조작/가공 -> 이렇게 나온 데이터를 구독하여 어떤 행위를 할 것인지 observer 전달

• observer에는 Observable을 가지고 어떤 행위를 할 것인지가 정의되어 있다. next, error, complete 함수를 가진 객체.

  const user$ = from(...).pipe(
    switchMap(data => ...),
    filter(user => ...),
    map(user => ...)
  )
  const observer = {
    next : x => console.log(`Observer가 Observable로 받은 데이터: ${x}`),
    error: err => console.error(`Observer가 Observable로 받은 에러 데이터: ${error}`),
    complete: () => console.log(`Observer가 Observable로 부터 종료 되었다는 알림 메시지`)
  }
  user$.subscribe(observer)

• 데이터를 쓸데없이 계속 전달받지 않아야 할 때는 구독 취소하여 자원을 해제해야 한다. (이벤트 핸들러, interval 같은 것들..)

  const sub = user$.subscribe(observer)
  sub.unsubscribe() 

• Observable로 생성된 객체는 변수 끝에 $을 붙인다.

• Observable을 생성하는 메소드: from(), fromEvent()

<input type="text" ref="answer"/>

이제 위 input태그는 vue에서 'answer'라는 이름으로 접근할 수 있게 된다. (this.$refs.answer 이런 식으로 접근)

• 다만 남발하지 말고 데이터로 도저히 컨트롤이 되지 않는 상황에서만 ref를 사용하자.

v-model이 input과 data를 연결하는 것임.

그리고 v-on, v-if 처럼 'v-'가 붙은 속성의 따옴표 안에는 자바스크립트 코드를 작성할 수 있다.

<button v-if="data + 1 === 5"></button>

그래서 v-model을 사용하면 그 하위 컴포넌트에서 value라는 props를 받게 된다.

아직 vue가 어색하니 일단 이렇게 외운다..........