[Vue.js 프로젝트 투입 일주일 전] 9장 - Reusability & Composition

9.1 Composition API

  - Composition API란?

    - 컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록

       Vue 3에 추가된 함수 기반의 API

    - Setup 메소드 안에서 한 덩어리로 코드 구현 가능 (코드 관리 쉬워짐)

    - 특정 기능을 갖는 함수를 정의하고, API 처럼 사용할 수 있게 해줌

    - 코드에 대한 재활용성을 높이고, 코드의 가독성을 높임, 코드 추적 및 유지 관리 쉬워짐 (연관성 있는 로직 모아놓음)

  - Setup

    - 컴포지션 API 구현하는 곳

    - reactive 이용

    - reactive, computed 이용

    - reactive, computed, toRefs 이용

  - Lifecycle Hooks

    - setup()는 beforeCreate와 created 훅 사이에서 발생

  - Provide/Inject

    - 컴포지션 API에서 사용하기 위해 별도로 import 해야 함

9.2 믹스인(Mixins)

  - 믹스인(mixins) 파일 생성

    - $ prefix를 사용하여 컴포넌트 내에서 사용하는 methods 명과 구분

  - 컴포넌트에서 믹스인(mixins) 사용

    - Axios를 이용한 api 통신 methods 사용 가능

    - 이벤트 훅 그대로 이용 가능

  - 믹스인(mixin)에서 라이프사이클 훅 사용하기

    - 컴포넌트의 라이프사이클 훅 그대로 이용 가능

    - 믹스인에 있는 코드가 먼저 실행되고, 컴포넌트에 있는 코드 실행됨

    - ex) 모든 컴포넌트마다 사용자 방문 시간, 종료 시간 체크해서 (mounted, unmounted 훅 이용)
             Database 에 시간 저장으로 활용 가능

  - 믹스인 파일 전역으로 등록하기: main.js에 등록

9.3 Custom Directives

  - 사용자 정의 디렉티브 사용 가능

  - ex) 사용자가 컴포넌트에 접속했을 때 지정된 입력 필드로 자동 포커스 위치

  - 데이터 바인딩 처리도 가능

9.4 Plugins

  - 특정 기능을 제공하는 코드

  - 직접 플러그인을 제작해서 전역으로 사용 가능

  - ex) i18n.js (다국어 처리)

  - provide로 다국어 데이터를 전달해서 inject 이용해서 사용도 가능

---

[Source Code] Ch 09. Reusability & Composition