[Udemy Vue 완벽가이드 Section6] 73. 여러 Vue앱과 여러 컴포넌트

Vue.js를 사용하여 페이지 일부(여러 HTML)를 제어하거나, 소위 '싱글 페이지 애플리케이션(SPA)'를 구축할 수 있다.

 

HTML 페이지의 여러 독립적인 부분을 제어하는 경우, 여러 Vue앱으로 작업하는 경우가 많다. 

(ex: createApp()을 두번 이상 호출하여 여러 앱을 만든다.)

 

# SPA 구축

반면에 SPA를 구축하는 경우, 일반적으로 하나의 '루트 앱'을 작업하고(즉, createApp()은 전체 코드베이스에서 한번만 사용됨), 대신 여러 컴포넌트로 사용자 인터페이스를 구축한다.

 

여러 Vue앱이 있는 경우에도 컴포넌트를 사용할 수 있지만, 하나로 연결된 큰 사용자 인터페이스를 구축하는 경우, 일반적으로 여러 Vue앱을 사용하지 않는다.

 

 

왜일까?

Vue앱은 서로 독립적이므로 서로 통신이 불가능하다. 통신할 수 있게 하는 공식적인 방법이 존재할 수 있지만, Vue앱 간에 데이터를 공유하고, 앱 B에서 문제가 발생하는 경우 앱 A에서 업데이트하는 마땅한 공식적인 방법이 없다.

 

반면, 컴포넌트는 컴포넌트간에 데이터를 교환할 수 있는 특정 통신 메커니즘을 제공한다.

따라서 여러 컴포넌트를 포함하는 하나의 루트 앱으로 작업하는 경우, 하나로 연결된 UI를 구축할 수 있다.

 

 

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