Vue.js 잘라먹기 - 컴포넌트

컴포넌트는 vue에서 가장 강력한 기능.
코드 캡슐화에 도움이 됨.

전역 등록 vs 지역 등록

전역 등록과 지역 등록은 말 그대로 스코프가 어디까지 인지에 따라 정해진다. 그런데 난 인스턴스가 범위라고 하면 솔직히 둘이 뭐가 다른지 모르겠다. 보통 인스턴스 하나인 경우만 다루어 봤기 때문에 한 인스턴스에만 국한되든, 아니면 전역으로 있든 실질적인 차이는 잘 와 닿지 않는다.

DOM 템플릿 경고 -> is 특수 속성

<table>과 같은 태그 밑으로는 커스텀 컴포넌트 태그를 바로 사용 할 수 없다.
따라서 <tr is="someting">과 같이 사용 해야 한다. 솔직히 다 의미 없고 is가 매우 중요해 보인다. 컴포넌트를 지정해 주는 것인데 앞으로도 많이 사용 할 것으로 보인다.

data는 반드시 함수

컴포넌트의 data 옵션은 function 문법으로 작성된 함수여야 한다. 어떠한 값이면 실행이 되지 않는다. 함수여야 하는 이유는 재사용 되었을 때 각각의 인스턴스를 따로 만들기 위함이다. 함수는 실행 후 새로운 값을 인스턴스로 가져가지만, 값은 모두 같이 사용하게 되기 때문에 재사용이 불가능해...지지만 실은 이걸 일부러 활용 할 수도?!;

컴포넌트의 작성

props는 아래로 , events 위로. emit events, pass props.

props

props 옵션을 통해서 명시적으로 전달

동적 props

v-bind와  props을 결합. 다수를 결합 할 수 도 있음.

리터럴 vs 동적

솔직히 뭘 어떻게 하든 상관 없을 것 같은데

단방향 데이터 흐름

'' In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.''

 자식 안에서 새로 만들면 부모가 다시 내리고 그래서 무한 루프에 갇힌다는 이야기인가? 2가지 방법이 있다고 하는데 나는 computed를 사용하는 것을 더 선호한다.

props 검증

요구 사항을 지정할 수 있다. 주로 type을 많이 사용한다. type은 string, number, boolean, function object, array, symbol이 있다.

props가 아닌 속성

그냥 컴포넌트에 맘대로 넣어도 된다. 알아서 잘 이해함 vue는. 안되면 다시 해보지 뭐.

존재하는 속성 교체/병합

부모와 자식이 같은 속성에 대해 다른 값을 가질 수 있다. 속성의 값이 상속되면서 충돌 할 수 있는데 일단 class와 style은 중복/병합으로 해결한다. 그러면 다른 속성들은 어떻게 해결할까? 이에 대한 해결로 사용자 정의 이벤트 시스템을 활용한다.

v-on을 이용한 사용자 지정 이벤트

$emit('something')을 통해서 상위에서 내려오는(혹은 props마냥 정해진) v-on을 작동 시킬 수 있다.  v-on은 컴포넌트 태그에 속성으로서 alias와 실행시킬 함수를 연결 시킨다. 이를 이벤트를 감지한다고 하고 emit을 통해 이벤트를 실행시키는 것을 이벤트를 트리거 한다고 한다.

.sync 수식어

엄연히 따지면 .sync는 없어졌고 .sync와 같이 사용하는 방법이 남았을 뿐인 듯 하다.

<comp :foo="bar" @update:foo="val => bar = val"></comp>

하위 컴포넌트가 foo를 갱신하려면 속성을 변경하는 대신 명시적으로 이벤트를 보내야합니다.

this.$emit('update:foo', newValue)

위와 같이 .sync 대신 @update를 통해서 bar와 foo를 연결 시키고 잇다. 

사용자 정의 이벤트를 사용하여 폼 입력 컴포넌트 만들기

 예를 들면 @input= f()와 $emit을 통해서 폼의 입력을 관리 할 수 있다는 뜻이다. 언뜻 어려워 보이나 별 이야기 아님

컴포넌트의 v-model 사용자 정의

컴포넌트의 model 옵션과  props 옵션을 결합해서 렌더링된 결과를 만들어 낼 수 있다. 중요한 것은 model 옵션에서 prop이라는 키를 명시하고 props에서 필요한 것을 다시 명시적으로 표현해야 한다.

비 부모-자식간의 통신

그냥 빨리 vuex를 배우는게 낫다

슬롯을 사용한 컨텐츠 배포

새로 받는 컴포넌트를 어떻게 원하는데로 잘 본래의 컴포넌트에 집어 넣을 것인가? <slot>을 사용한다!

범위 컴파일 ??? 

별 이해 필요 없다. 넘어가지

단일 슬롯

컴포넌트 내로 들어온 object가 슬롯으로 들어감. <slot>은 <template>와 같이 렌더 되지 않는다. 어려울 것 없다.

이름을 가지는 슬롯

컴포넌트 내로 들어온 object에 속성으로 slot="something"을 주면, 컴포넌트에 속한 <slot>중 name 속성과 일치하는 것으로 object가 삽입되고 나머지는 걍 아무 <slot>에 들어가게 된다. 

범위를 가지는 슬롯

컴포넌트에 <slot>이 있고 이의 속성으로 something = "somesomething"이 있다고 하자. 이 때 컴포넌트 내로 기입된  object에 slot-scope="props"가 있다면 이는 props를 통해 기입된 object에서 데이터를 넘기겠다는 의미가 된다. 즉 object내에 {{props.something}}이 있다면 이의 값은 <slot somthing="somesomething">에서 prop으로 넘어온 값인 "somesomething"이 될 것이다.

동적 컴포넌트

인스턴스의 component 속성과 <component>를 사용해서 여러 컴포넌트를 동적으로 사용 할 수 있다. <component>의 속성에 v-bind를 하고 is를 사용해서 인스턴스의 data 속성의 값을 변경함으로써 <component>를 원하는데로, 동적으로 변환 시킬 수 있다.

keep-alive

메모리에 컴포넌트를 유지하고 상태를 보존.  <keep-alive>로 감싸주자.

기타

재사용 가능한 컴포넌트 제작하기

중요한 것은 vue의 컴포넌트 api가 prop, event, slot의 세 부분으로 나뉜다는 것이다. 잊지말고 이를 바탕으로 잘 만들어 보라

자식 컴포넌트 참조

자식 컴포넌트의 요소를 받기 위해서는 속성에 ref="something"을 추가하자. parent.$refs.something으로 요소를 불러올 수 있다. 다만 ref는 반응적이지 않다.  그러므로 템플릿이나 computed에 사용하면 안된다.

비동기 컴포넌트

1. 웹팩을 사용하세요.
2. 별건 없습니다. vue 컴포넌트 만들 때 객체 넣는 부분에 비동기 함수 식으로 작성하고 값을 객체로 내세요.
3. propmise도 가능합니다.

고급 비동기 컴포넌트

const AsyncComp = () => ({ // 로드하는 컴포넌트입니다. 반드시 Promise이어야합니다. component: import('./MyComp.vue'), // 비동기 컴포넌트가 로드되는 동안 사용할 컴포넌트 loading: LoadingComp, // 실패했을 경우 사용하는 컴포넌트 error: ErrorComp, // 로딩 컴포넌트를 보여주기전 지연하는 정도. 기본값: 200ms. delay: 200, // 시간이 초과되면 에러용 컴포넌트가 표시됩니다 // 기본값: Infinity. timeout: 3000 })

컴포넌트 이름 규약

걍 케밥 써라

재귀 컴포넌트

전역으로 등록한 컴포넌트를 재귀 가능하며 무한 루프를 막을 수 있는 장치를 마련해라

컴포넌트 사이의 순환 참조

이런 경우를 안 만드는게 좋고 일단, 만들었으면 컴포넌트 사이클을 이용해보자. beforeCreate를 통해 순환 참조되는 것 중 하나를 일단 렌더를 하든 뭘 하든 고정시키면 해결이 될 것이다.

인라인 템플릿

쓰지 마라

x-template

쓰지 마라

v-once를 이용한 비용이 적게드는 정적 컴포넌트

정적 컨텐츠가 많이 포함된 컴포넌트를 매번 재 렌더하는건 큰 비용이 든다. 더 이상의 렌더가 필요 없다고 하면 v-once를 루트 엘리먼트에 추가해서 캐시가 한번만 실행되도록 하자.