[인프런] 컨포넌트간 통신방법 [props]

컨포넌트 구조도

위와같은 컨포넌트 구조가 있다. 

 

위와같은 상황에서 AppHeader 에서 LoginForm으로 데이터를 전달했다.

LoginForm은 전달받은 데이터를 AppFooter로 데이터를 보냈고

AppFooter는 NavigationBar 로 데이터를 보냈다.

 

라고 하면은 특정 컨포넌트의 변화에 따라 나머지 컨포넌트들이 유기적으로 데이터가 변화하는것을 볼 수 있다.

==> 이런 데이터들의 관계가 생기기 시작하면 특정 데이터가 변화했을때 그로인한 버그를 추적하기 힘들다

       (n방향 통신의 문제점)

       기존 MVC패턴이 이런 문제점이 있었다. 

 

---

- 뷰에서의 컨포넌트 통신 규칙

 

이제는 데이터가 아래로만 흘러간다 => 컨포넌트 통신의 규칙이 생김 ==> 데이터의 흐름을 추적할 수 있다.

아래에서 위로는 이벤트가 올라간다. 

 

위에서 아래로 데이터를 전달 : props 속성에 데이터를 담아 아래로 전달할것

아래에서 위로 데이터를 전달 : event가 발생해 데이터를 아래로 전달할것

 

 

 

- props 속성

위 소스를 실행하면 아래 화면이 나온다.

이 상태에서 Root에 data속성의 message 값을 AppHeader로 내려보자.

 

• props 정의 방법

  • 1. 등록할 컴포넌트에 데이터 바인딩 추가
    프롭스 문법 : v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"

  • <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름" ></app-header>

 

•  
  
  • 2. 컴포넌트에 props 속성 추가 
    props: ['변수명']
  • 데이터바인딩으로 통해 propsdata를 화면에 출력해보자 {{ propsdata }}

        

-- 확인

 

 

---

현재 AppHeader의 propsdata의 값은 root의 message의 값을 내려받은 것 이다.

그렇다면 root의 message의 값이 변한다면 AppHeader의 propsdata의 값은 어떻게 될까?

 

message값 변경

message의 값은 'change meaage' 로 변경하였다. 실행해보자.

 

root의 변경된 값이 내리온다.

==> 바뀐데이터가 그대로 반영되어 AppHeader의 propsdata로 내려온다.  == ractivity