Vue.js를 시작하면서 해당 프레임워크의 대표적이자 기본적인 기능 중 하나인 ‘컴포넌트 통신 방법’에 대해 공부하고 있습니다. 간단해 보일 수 있으나, 입문 단계에서는 완전히 이해하는 과정에 있어 어려움을 느낄 수 있다 판단하여 해당 스터디 내용을 정리해 보았습니다.
오늘 다루게 될 내용의 기본 구조입니다. 사진에서 Root는 상위 컴포넌트, 인스턴스를 의미하며, AppHeader와 AppContent는 생성된 하위 컴포넌트를 의미합니다.
- 인스턴스(instance) : Vue로 개발시 필수로 생성해야 하는 코드
- 컴포넌트(component) : 재사용이 가능하며, 조합하여 화면을 구성할 수 있는 블록을 의미
위와 같은 구조에서 AppHeader와 AppContent간에(같은 레벨) 데이터를 어떻게 전달할 수 있을지에 대해 다뤄볼 것이며, 해당 내용을 시작하기 전에
Vue.js에서 기본 데이터 전달 방식은 인스턴스에서 컴포넌트(아래 방향)로는 ‘props’
컴포넌트에서 인스턴스(위 방향)로는 ‘event($emit)‘으로 전달한다는 것을 알고 시작하시면 좋을 것 같습니다.
1. 컴포넌트 생성
화면과 같이 AppHeader와 AppContent 컴포넌트를 생성해주었고, Vue개발자 도구에서 Root아래 두 컴포넌트가 생성된 것을 확인할 수 있습니다.
pass라는 버튼을 누르면 AppContent에 있는 데이터 값 10을 AppHeader로 넘겨줄 수 있도록 하는 것이 오늘의 목표입니다. 때문에 먼저 AppContent에 root라는 이름을 가진 button을 추가하고, methods 속성을 추가해 보겠습니다.
2. AppContent -> AppHeader로 데이터를 한번에 넘길 수 없다면?
AppContent ---> AppHeader 로 바로 데이터 값을 넘기면 좋겠지만, 같은 레벨일 경우 바로 전달할 수가 없습니다. 때문에 ①컴포넌트에서 인스턴스로 데이터를 먼저 전달해준 다음, ②인스턴스에서 컴포넌트로 다시 내리는 과정이 필요합니다.
결과적으로,
AppContent ---> AppHeader의 데이터 전달을 위해서는 위와 같은 순서의 데이터 전달이 필요합니다.
그럼 이제 방법을 알았으니 AppContent에서 Root로 ‘10’이라는 값을 전달하고 Root에서 AppHeader로 데이터 값을 넘기는 과정을 시작해보겠습니다.
3. 데이터 값 넘기기
상위 인스턴스에서 하위 컴포넌트로 데이터 값을 넘길 때는 props를 사용하여 넘겨준 다는 것을 시작할 때 언급했습니다. 이렇게 넘기기 위해서는 인스턴스에 미리 data를 선언해주는 과정이 필요합니다.
3-1. AppContent ---> Root 방향으로 event를 사용해 데이터를 넘기기
AppContent에서 'v-on'을 사용하여 AppContent에서 생성되어 있는 pass 이벤트를 받아옵니다. 받아온 이벤트로 상위 이벤트를 수행 할 수 있습니다. (* 아래에서 위로 데이터를 전달하는 방법 : event)
상위 인스턴스에 deliverNum이라는 event를 생성해주고, 넘어온 value값은 this.num에 담아 결국은 해당 이벤트로 value값이 10이 됨을 알 수 있습니다.
3-2. Root ---> AppHeader 방향으로 props를 사용해 데이터를 넘기기
기본적인 문법은 *<app-header v-bind:프롭스 속성 이름=“상위 컴포넌트의 데이터 이름”>으로 써줍니다.
프롭스 속성 이름을 AppHeader에 생성해주고, 상위 컴포넌트의 데이터 이름은(Root) 이미 data로 선언되어 있기 때문에, 순서대로 코드를 작성해 준 뒤
해당 버튼 이벤트를 실행시켜주면 최종적으로 AppHeader에 props속성으로 '10'이 전달 된 것을 확인 할 수 있습니다.
마치며
프론트앤드 개발에 관심을 가지면서 다양한 프레임워크에 익숙해 지고자 하는 목표를 가지고 있으나, 생각처럼 그 원리를 이해하는게 쉽지 않은 것 같습니다. 기초가 되는 부분이지만 모든 것은 기초가 탄탄해야 무너지지 않는 다고 생각합니다. 학습 할 수 있을 때 차근 차근 기초 원리에 대해서 이해해 보는 것도 앞으로 나아가야할 방향성에 좋은 거름이 될 것이라고 생각합니다.
부족한 점이 많은 글이지만 읽어주셔서 감사합니다 :)
참고자료
- [인프런]캡틴판교 - Vue.js 시작하기(https://www.inflearn.com/)
- [공식문서]Vue.js(https://kr.vuejs.org/v2/guide/index.html)