[Vue.js] 컴포넌트간의 통신방법 3가지의 차이점 (emit, props / eventbus / Vuex)

 

쿼리 한 줄을 짤 때에도 성능에 어떤 영향을 미칠 지 고민하고 짠다는 서비스회사의 얘기를 처음 들었을 때 꽤나 충격을 받았다.

그 뒤로 늘 일정에 쫓겨 '돌아가기만 하면 되는 코드'만 만들어오던 모습에서 이제는 '좋은 코드'에 가까워지기 위해 노력하고 있다.

 

이번에 Vue.js로 클론코딩을 진행하며 전혀 사용하지않았던 새로운 방식으로 컴포넌트를 쪼개어보았다.

그러자 컴포넌트의 depth가 많아졌고 필요한 곳마다 같은 파일을, 같은 변수를 Import하는 내 모습을 깨닫고 이건 아니다 싶어 몽땅 지워버리고 적절한 통신방법에 대해 고민하기 시작했다.

 

내가 알고있는 컴포넌트간의 통신방법은 3가지로 추려볼 수 있다.

1. props & emit

2. eventbus

3. Vuex

 

지금까지는 eventbus를 제외하고 마음대로 사용해왔었는데 한번도 '왜 통신방법이 이렇게 다양할까?'는 생각해보지 않았다.

만약 내 클론코딩 프로젝트를 보며 누군가가 '왜 여기서 이 통신방법을 선택하셨어요?'라고 묻는다면... 할 말이 없었다.

 

그런 이유로 다시 한 번 정리해보는 컴포넌트간의 통신방법!

 

 

---

 

 

1. props & emit

Vue는 상위에서 하위로 흐르는 단방향 데이터 흐름으로, 하위에서 상위로 데이터가 흐르는 것이 불가능하다.

이 때 데이터를 공유하는 첫번째 방법이 props과 emit을 사용하는 것이다.

하위에서 emit으로 상위 컴포넌트에 이벤트를 발생시키고, 상위 컴포넌트에서는 props로 데이터를 전달해주는 방식으로 데이터를 전달할 수 있다.

 

 

2. Eventbus

하지만 props와 emit은 상위컴포넌트와 하위컴포넌트 사이에 거쳐야 할 컴포넌트의 수가 많으면 관리가 어려워진다.

그래서 한 곳에서 관리를 용이하게 하기위해 나온 개념이 이벤트버스(Eventbus)이다.

하지만 이벤트버스 역시 한 파일에 모든 정보가 담겨있기 때문에 규모가 커질수록 관리가 어려워진다.

 

 

3. Vuex

위의 2가지 문제들을 해결하기 위해 Vuex를 사용한다.

Vuex는 상태관리패턴(state, view, actions)을 사용하여 데이터를 중앙 저장소에서 관리하고 각 컴포넌트들에 공유한다, 

 

** Vuex의 자세한 설명은 해당 포스팅에 정의되어 있습니다.

[Vue.js] Vuex란?

 

 

+) 추가 (2022.01.17)

통신방법에 provide과 inject도 있다.

Vue에서는 이벤트버스를 추천하지 않는다고 한다. (❗️)

[Vue.js] 컴포지션(Composition) - provide와 inject

 

 

 

출처

https://pewww.tistory.com/1

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.