Vue.js 입문 <컴포넌트 통신 방법>

같은 컴포넌트 레벨 간의 통신 방법


Vue.js를 시작하면서 해당 프레임워크의 대표적이자 기본적인 기능 중 하나인 ‘컴포넌트 통신 방법’에 대해 공부하고 있습니다. 간단해 보일 수 있으나, 입문 단계에서는 완전히 이해하는 과정에 있어 어려움을 느낄 수 있다 판단하여 해당 스터디 내용을 정리해 보았습니다.

image1
기본 구조

오늘 다루게 될 내용의 기본 구조입니다. 사진에서 Root는 상위 컴포넌트, 인스턴스를 의미하며, AppHeader와 AppContent는 생성된 하위 컴포넌트를 의미합니다.

  • 인스턴스(instance) : Vue로 개발시 필수로 생성해야 하는 코드
  • 컴포넌트(component) : 재사용이 가능하며, 조합하여 화면을 구성할 수 있는 블록을 의미

위와 같은 구조에서 AppHeader와 AppContent간에(같은 레벨) 데이터를 어떻게 전달할 수 있을지에 대해 다뤄볼 것이며, 해당 내용을 시작하기 전에
image2
데이터 통신 기본구조

Vue.js에서 기본 데이터 전달 방식은 인스턴스에서 컴포넌트(아래 방향)로는 ‘props’
컴포넌트에서 인스턴스(위 방향)로는 ‘event($emit)‘으로 전달한다는 것을 알고 시작하시면 좋을 것 같습니다.



1. 컴포넌트 생성


image3
컴포넌트 생성코드
image4
출력되는 화면

화면과 같이 AppHeader와 AppContent 컴포넌트를 생성해주었고, Vue개발자 도구에서 Root아래 두 컴포넌트가 생성된 것을 확인할 수 있습니다.

image5
AppContent에 있는 '10'이라는 데이터 값을 AppHeader로 넘길 것입니다.

pass라는 버튼을 누르면 AppContent에 있는 데이터 값 10을 AppHeader로 넘겨줄 수 있도록 하는 것이 오늘의 목표입니다. 때문에 먼저 AppContent에 root라는 이름을 가진 button을 추가하고, methods 속성을 추가해 보겠습니다.

image7
pass 버튼을 클릭시 발생되는 이벤트명은 passNum로 정의
image6
화면에 출력되는 상태




2. AppContent -> AppHeader로 데이터를 한번에 넘길 수 없다면?

AppContent ---> AppHeader 로 바로 데이터 값을 넘기면 좋겠지만, 같은 레벨일 경우 바로 전달할 수가 없습니다. 때문에 ①컴포넌트에서 인스턴스로 데이터를 먼저 전달해준 다음, ②인스턴스에서 컴포넌트로 다시 내리는 과정이 필요합니다.

결과적으로,
image8 AppContent ---> AppHeader의 데이터 전달을 위해서는 위와 같은 순서의 데이터 전달이 필요합니다.
그럼 이제 방법을 알았으니 AppContent에서 Root로 ‘10’이라는 값을 전달하고 Root에서 AppHeader로 데이터 값을 넘기는 과정을 시작해보겠습니다.



3. 데이터 값 넘기기

상위 인스턴스에서 하위 컴포넌트로 데이터 값을 넘길 때는 props를 사용하여 넘겨준 다는 것을 시작할 때 언급했습니다. 이렇게 넘기기 위해서는 인스턴스에 미리 data를 선언해주는 과정이 필요합니다.

image9
data 선언해주기


3-1. AppContent ---> Root 방향으로 event를 사용해 데이터를 넘기기


image10
데이터를 넘겨주는 과정
AppContent에서 'v-on'을 사용하여 AppContent에서 생성되어 있는 pass 이벤트를 받아옵니다. 받아온 이벤트로 상위 이벤트를 수행 할 수 있습니다. (* 아래에서 위로 데이터를 전달하는 방법 : event)

상위 인스턴스에 deliverNum이라는 event를 생성해주고, 넘어온 value값은 this.num에 담아 결국은 해당 이벤트로 value값이 10이 됨을 알 수 있습니다.

image11
출력값



3-2. Root ---> AppHeader 방향으로 props를 사용해 데이터를 넘기기

기본적인 문법은 *<app-header v-bind:프롭스 속성 이름=“상위 컴포넌트의 데이터 이름”>으로 써줍니다.

image12
프롭스로 데이터 받기
프롭스 속성 이름을 AppHeader에 생성해주고, 상위 컴포넌트의 데이터 이름은(Root) 이미 data로 선언되어 있기 때문에, 순서대로 코드를 작성해 준 뒤

image13
출력값
해당 버튼 이벤트를 실행시켜주면 최종적으로 AppHeader에 props속성으로 '10'이 전달 된 것을 확인 할 수 있습니다.




마치며

프론트앤드 개발에 관심을 가지면서 다양한 프레임워크에 익숙해 지고자 하는 목표를 가지고 있으나, 생각처럼 그 원리를 이해하는게 쉽지 않은 것 같습니다. 기초가 되는 부분이지만 모든 것은 기초가 탄탄해야 무너지지 않는 다고 생각합니다. 학습 할 수 있을 때 차근 차근 기초 원리에 대해서 이해해 보는 것도 앞으로 나아가야할 방향성에 좋은 거름이 될 것이라고 생각합니다.

부족한 점이 많은 글이지만 읽어주셔서 감사합니다 :)

참고자료


추천 글