제발업데이트좀하자 준수야

  - slot

특정 컴포넌트에 등록된 하위 컴포넌트의 마크업을 확장하거나 재정의하여 재사용성을 높여주는 기능 입니다.

예를 들어 모든 페이지에서 범용성 있게 사용하는 컴포넌트에 간단한 추가적인 레이아웃을 구현해야 한다고 생각해 봅시다.

이미 사용중인 다른 페이지의 영향을 안받도록 구현해야할 뿐만 아니라 노출에 대한 분기처리를 해주어야 합니다.

v-slot을 사용할 경우 새로운 컴포넌트를 추가하지 않아도 기존의 컴포넌트를 확장하여 사용할 수 있습니다.

Vue.js 2.6.0이상 에서

named slot과 scoped slots 의 문법적 사용이 변경되었습니다. 따라서 설명은 최신 문법 기준으로 설명하겠습니다.

named Slot

                  <변경 전>                                                                                          <변경 후>   

<base-layout>                                                                                <base-layout>
    <template slot="header">                                                              <template v-slot:header> 
        <h1>Here might be a page title</h1>.                                              <h1>Here might be a page title</h1>
    </template>                                                                                      </template>
</base-layout>                                                                              </base-layout>

scoped slots

                  <변경 전>                                                                                         <변경 후>

<slot-example>                                                                         <slot-example>  
    <template slot="default" slot-scope="slotProps">               <template v-slot:default="slotProps" >
        {{ slotProps.msg }}                                                                     {{ slotProps.msg }}
    </template>                                                                                </template>
</slot-example>                                                                        </slot-example>

상위 컴포넌트

<template>
  <div class="app">
    <ChildComponent>
    
    <!-- default는 이름이 지어 지지않은 slot에 기본 값으로 적용 됩니다. -->
      <template v-slot:default>
        <span>안녕하세요</span>
      </template>
      
    </ChildComponent>
  </div>
</template>

하위 컴포넌트

<template>
  <div class="child-component">
    <slot></slot>  <!-- 해당 태그가 교체 됩니다. --> 
  </div>
</template>

결과

<template>
  <div class="child-component">
    <span>안녕하세요</span> 
  </div>
</template>

랜더링 시 <slot><slot> 태그는 상위 컴포넌트 하위 컴포넌트 태그 안의 값 <span>안녕하세요</span> 으로 치환됩니다. 

하나의 슬롯을 이용하는 것 말고 여러개의 슬롯을 특정 위치에 배치하고 싶다면 어떻게 할까요?

Named Slots

slot 마다의 이름을 지정해 준다면 원하는 위치에 해당 태그들을 대치 시킬 수 있습니다.

v-slot:[name] 또는 #[name]

하위 컴포넌트에서 아무 이름을 입력해 주지 않는다면 default 태그로 인식됩니다.

허나 default 이름을 가진 slot 태그와 아무 이름도 갖지 않은 slot태그가 동시에 존재한다면 default에 대치되게 됩니다.

상위 컴포넌트

<template>
  <div class="app">
  
    <ChildComponent>
    
      <template v-slot:apple>
        <span>apple</span>
      </template>

      <template v-slot:default>
        <span>기본값 이름입니다.</span>
      </template>
      
    </ChildComponent>
    
  </div>
</template>

하위컴포넌트

<template>
  <div class="child-component">

    <!-- v-slot:apple은 이곳에 대치 됩니다. -->
    <slot name="apple"></slot>

    <!-- v-slot:default는 이곳에 대치 됩니다.-->
    <slot></slot>
    
  </div>
</template>

결과

Scoped Slots

상위 컴포넌트에서 하위 컴포넌트의 값이 필요할 경우가 생긴다면 어떻게 될까요? 

하위 컴포넌트 

상위 컴포넌트

하위 컴포넌트에서 v-bind로 던저준 값을 상위 컴포넌트에서 구조분해 할당을 통해 가져올 수 있게 됩니다! 

v-slot을 알게 되면 여러모로 코드를 볼때 편해지게 됩니다. vutify의 dialog와 bootstrapVue의 tag등 편하게 사용하려쓰는

디자인 라이브러리 내에서도 v-slot을 많이 이용하고 있기 때문입니다. 

언제나 추가적인 질문 및 잘못된 내용을 알려주세요!

더 많은 공부가 될 수 있는 기회가 되었으면 좋겠습니다!

vuex란?

vuex는 vue에서 활용할 수 있는 상태관리라이브러리 입니다.

애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다.

vuex를 왜 사용하는가?

- 대용량의 SPA에서의 컴포넌트끼리 공통적인 데이터를 사용함에 있어 데이터 및 상태 관리를 용이하게 한다.

? 쇼핑몰 서비스를 예를 들자. 로그인을 한 고객의 정보를 다양한 컴포넌트에서 사용할 확률이 높다. (이름, 등급 등) 따라서 이러한 데이터를 vuex에 저장해 두고 다양한 컴포넌트에서 꺼내쓴다면? 

- 애플리케이션의 상태에 대한 예측이 쉬워진다. 

? 데이터를 변경하고 저장하는 일련의 공통적인 과정들을 vuex store내에서 관리하게 된다면 일괄적이고 지역적으로 관리할 수 있게 된다.

그렇다면 단점은?

- 새로고침시 vuex store내에 저장된 데이터가 사라지게된다.

- 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우 단순함이 빠르게 저하된다. 즉 프로젝트가 복잡해진다.

즉 프로젝트가 크지않다면 굳이 vuex를 사용하지 않아도 된다. 컴포넌트별 상태를 주고 받는 이벤트는 사실 많기 때문이다!

( vuex공식 사이트에서도 그렇게 말하고 있다. )

화자도 vuex를 사용하면서 새로고침시 데이터가 사라지는 것을 방지하기 위해 localStorage등을 함께 사용하고 있다.

Vuex의 데이터 흐름도

stage, mutations, actions, getter 4가지 형태로 관리하게 된다

State

 - Vue Components에서의 data에 해당하는 것으로 원본 데이터를 의미한다.

 - state는 mutation을 통해서만 변경이 가능하다.

Mutations

- State를 변경하려면 반드시 호출해야하는 것으로 method와 비슷하다.

- 단 Mutations는 commit을 통해서만 호출 할 수 있으며 함수로 구현된다.

Actions

- 비동기 작업이 가능합니다.

 - mutation을 호출하기 위한 commit이 가능합니다.

 - action은 dispatch를 통해 호출할 수 있습니다.