[Vue.js 프로젝트 투입 일주일 전] 8장 - 컴포넌트 심화 학습

8.1 컴포넌트 안에 다른 컴포넌트 사용하기

  - 부모 컴포넌트와 자식 컴포넌트

    - 사용할 컴포넌트를 import 한 후 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 components에 등록

    - 개발하면서 각 페이지의 타이틀의 색상이나 레이아웃 변경 등 디자인 변경이 필요한 경우,
       페이지 타이틀 컴포넌트만 수정하면 모든 화면에 반영되므로 효율적으로 관리 가능

    - 컴포넌트는 페이지 하나 전체가 될 수도 있고, 하나의 페이지를 이루고 있는 단위 요소일 수도 있음

  - 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기: Props

    - 정적/동적 Prop 전달

      - v-bind나 약어 : 문자를 사용해서 prop에 동적인 값 전달 가능

    - 숫자형(Number) 전달

      - v-bind를 통해서만 가능
        - 전달되는 데이터가 자바스크립트 표현식이 됨

    - 논리 자료형(Boolean) 전달

      - v-bind를 사용하지 않으면 문자열로 전달되므로 반드시 v-bind나 약어 : 문자 사용

    - 배열(Array) 전달

      - v-bind 사용

    - 객체(Object) 전달

      - v-bind 사용

    - 객체(Object)의 속성 전달

      - v-bind 사용

    - Prop 유효성 검사

      - 자식 컴포넌트에서 props 옵션 정의 시,

         전달받는 데이터 타입, 기본 값 필수 여부, 유효성 검사 함수를 통해 유효성 검사 가능

      - null, undefined는 모든 타입 유효성 검사 통과

      - type, default, required, validator
      - 객체나 배열의 기본 값은 항상 팩토리 함수로부터 반환되어야 함

  - 부모 컴포넌트에서 자식 컴포넌트의 이벤트 직접 발생시키기
    - ref 속성을 설정하여, this.$refs 로 접근 => 자식 컴포넌트의 this.$refs 접근

  - 부모 컴포넌트에서 자식 컴포넌트의 함수 직접 호출하기

    - ref 속성을 설정하여, this.$refs.자식_함수명()

  - 부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 직접 변경하기
    - ref 속성을 설정하여, this.$refs.자식_데이터 이용

  - 자식 컴포넌트에서 부모 컴포넌트로 이벤트/데이터 전달하기(커스텀 이벤트)

    - 자식 컴포넌트에서 $emit 이용

    - 부모 컴포넌트에서 커스텀 이벤트를 정의하고 자식 컴포넌트에서 $emit 으로 보낸 데이터 사용 가능

  - 부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 동기화하기

    - 부모 컴포넌트에서 computed를 이용하면 자식 컴포넌트에 정의된 데이터 옵션 값의 변경사항 항상 동기화 가능

    - computed는 참조되고 있는 데이터의 변경사항 바로 감지하여 반영 가능

    - 자식 컴포넌트의 데이터가 변경될 때 마다 $emit을 이용하여 데이터를 전송하지 않아도,

       변경된 데이터 항상 확인 가능

8.2 Slot

  - slot: 컴포넌트 내에서 다른 컴포넌트를 사용할 때 쓰는 컴포넌트의 마크업을 재정의하거나 확장하는 기능

    - 컴포넌트의 재활용성을 높여줌

    - ex) 팝업(모달)

      - 팝업의 기본 틀에 해당하는 컴포넌트를 slot을 이용하여 만들어서 제공

      - 컨텐츠에 해당하는 부분만 작성하면 됨

      - 사용하는 쪽에서 v-slot: 대신에 단축어로 # 사용 가능

  - props 정의할 필요도 없고, 부모에서 자식 컴포넌트로 props 데이터를 전달할 필요도 없어짐

  - 코드 훨씬 간결, 직관적

8.3 Provide/Inject

  - 부모 컴포넌트에서 Provide 옵션, 자식 컴포넌트에서 inject 옵션 통해 데이터를 자손 컴포넌트로 쉽게 전달 가능

  - 자식 컴포넌트에서 전달받는 데이터가 어떤 부모 컴포넌트에서 전달되는지 확인이 안된다는 단점 존재

8.4 Template refs

  - JS에서 HTML 객체에 바로 접근하기 위해 ref 속성 사용 가능

    - this.$refs.ref_이름을 통해 HTML 객체에 접근 가능

---

[Source Code] Ch 08. 컴포넌트 심화 학습