[Udemy Vue 완벽가이드 Section8] 107. 섹션 요약

컴포넌트가 서로 통신하는데 필요한 핵심 개념 몇 가지만 기억하면 된다.

1/ Component Communication Overview

- Components are used to build UIs by combining them.

• 보통 여러 컴포넌트를 결합하여 사용자 인터페이스를 구축한다. 컴포넌트의 좋은 점은 템플릿에 논리를 캡슐화하여 코드를 여러 개의 조각으로 나눌 수 있고, 컴포넌트를 재사용할수도 있다는 것.

- Components build 'parent-child' relations and use 'unidirectional data flows' for communication.

• 컴포넌트는 자동으로 부모-자식 관계를 형성한다. 컴포넌트 A의 템플릿에서 컴포넌트 B를 사용한다면 컴포넌트 A는 컴포넌트 B의 부모이고, 컴포넌트 B는 자식이 된다. 컴포넌트 B의 템플릿에 컴포넌트 C가 있는 경우, C는 B의 자식이자 일종의 컴포넌트 A의 자식이 된다.
• Vue는 통신에 '단방향 데이터 플로우'를 사용한다는 점을 기억해야한다. 그래서 기본적으로 데이터를 하위 컴포넌트로 전달하고, 상위 컴포넌트로 전달할 때는 다른 개념을 사용한다.

 

2/ 데이터를 하위로 전달할 때는 props(parent => child)

- Props are used to pass data from a parent to a child component.

•  props를 사용해서 데이터를 부모에서 자식으로 전달할 수 있다.

- Props should be defined in advance, possibly in great detail(type, required etc.)

• 수신할 자식 컴포넌트에서 사전에 props를 정의해야한다. 수신하려는 props를 알 수 있게 그냥 배열로 지정하거나, 더 세부적으로 들어가 어떤 유형의 데이터를 수신할 지, props가 필요한지 등을 Vue에 알려줄 수도 있다.

 

3/ Custom Events (child => parent)

다른 방향, 즉 자식에서 부모로 전달하는 경우에는 커스텀 이벤트가 필요하다.

- "Custom events" are emitted (via $emit) to trigger a method in a parent component.

• 컴포넌트는 내장된 $emit 메서드로 커스텀 이벤트를 발생시켜서 상위 컴포넌트에 무언가를 알리거나, 부모 컴포넌트에 있는 코드나 메서드를 트리거할 수 있다.

- Custom events can carry data which can be used in the called method.

• 커스텀 이벤트는 데이터를 가지고 이동할 수 있다. 가령, 사용자가 입력 필드에 입력한 데이터, 선택한 항목의 id 등 어떤 데이터든 부모 컴포넌트로 보낼 수 있다.

- 이웃간의 통신인 경우 (ex: 형제 요소가 두 개인 경우.)

• 두 개의 이웃 컴포넌트가 데이터를 교환해야하는 시나리오가 있다면, 결국 두 형제 컴포넌트의 공통 상위 컴포넌트를 사용해서 거기에 데이터를 저장한 다음, 각 형제가 부모와 통신을 하고 데이터가 있어야하는 각 형제 컴포넌트에 데이터를 전달한다.
• 결국엔 항상 부모-자식 관계를 통하게 된다. 형제 간의 통신은 없다.

 

4/ Provide-Inject

- If data needs to be passed across multiple components("pass-through"), you can use provide/inject.

• 데이터를 전달하기 위해 props와 커스텀 이벤트를 사용해서 많은 컴포넌트를 불필요하게 통과해야하는 경우, provide/inject 사용을 고려해볼 수 있다.

- Provide data in a parent component, inject it into a child component.

• 부모 컴포넌트에 데이터를 provide한 다음, provide한 데이터를 모든 하위 컴포넌트에서 inject할 수 있다.
• 얼마나 깊이 중첩되어있든 상관없다.
• provide/inject를 사용하면, props와 커스텀 이벤트를 사용해서 여러 레벨의 컴포넌트를 통과할 필요가 없다.

- provide, inject를 모든 props와 커스텀 이벤트를 대체하는데 사용하지 말고, 이런 장거리 통신이 필요한 경우에만 사용해라.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.