[Vue.js] 단일 파일 컴포넌트 - 스타일, 슬롯, provide-inject, 텔레포트

---

<style scoped> : 컴포넌트가 렌더링하는 요소에 대해 충돌 회피
<style module> : 모듈화, 객체화. 반드시 v-bind를 사용해서 연결

---

슬롯

• 부모 컴포넌트와 자식 컴포넌트 사이의 정보 교환 방법 -> props, 이벤트
• 부모 컴포넌트에서 자식 컴포넌트로 템플릿 정보를 전달하는 방법 -> 슬롯

명명된 슬롯

• 화면 레아아웃 관리 목적으로 각 영역에 이름을 배정

범위 슬롯

• 부모 컴포넌트에서 템플릿에 데이터를 바인딩할 때 자식 컴포넌트의 데이터로 바인딩하는 경우
• 전달된 데이터는 슬롯 템플릿 내부 범위에서만 사용

---

동적 컴포넌트

• 화면의 동일한 위치에 여러 컴포넌트를 표현해야하는 경우에 사용
• <component> 요소를 템플릿에 작성

---

provide, inject

• 컴포넌트의 계층 구조가 복잡해지면 계층 구조를 따라 연속적으로 속성을 전달해야하는 문제 발생
• 공용 데이터를 부모 컴포넌트(App)에서 제공(provide), 어느 컴포넌트에서나 필요한 데이터를 주입(inject)해서 사용

---

텔레포트

• 메인 화면과 독립적이면서 공유 UI를 제공하는 경우
• 부모가 자식의 렌더링 제어, 계층 구조와 관계 없이 별도의 요소에 렌더링

---

참고자료:

• ITYL 6기 수업자료
• https://ko.vuejs.org/guide/components/slots
• https://ko.vuejs.org/guide/components/provide-inject