# Vue 애플리케이션 특징

# 싱글 파일 컴포넌트

컴포넌트 단위 개발을 지향하는 Vue.js 싱글 파일 컴포넌트(SFC)는 각각의 HTML, CSS, JavaScript 파일을 분리하는 대신, 코드 기반 단위로 느슨하게 묶은 컴포넌트 파일을 말합니다. 컴포넌트 파일 내부에 템플릿(Template), 비즈니스 로직(Business Logic), 스타일(Style)이 배치되어 컴포넌트를 구성합니다.

싱글 파일 컴포넌트에 대한 아이디어가 마음에 들지 않는다면? HTML, CSS, JavaScript을 개별 파일로 분리하여 관리할 수 있습니다. 파일을 분리해 관리할 경우 src 속성에 연결될 파일의 경로를 입력하면 됩니다.

이해를 돕기 위한 예제를 직접 살펴보세요. 왼쪽 햄버거 메뉴를 누르면 분리된 템플릿, 로직, 스타일 파일을 확인할 수 있습니다.

# 컴포넌트 트리

웹 문서를 구성하는 DOM 트리(Tree)와 유사하게, 애플리케이션을 구성하는 컴포넌트들은 나무 뿌리처럼 연결됩니다.

예를 들어 헤더, 사이드바 및 콘텐츠 영역 컴포넌트가 있을 수 있고 각 컴포넌트는 내비게이션, 블로그 아티클 등 다른 컴포넌트를 내부에 포함할 수 있습니다. 다시 말해 포함한 컴포넌트는 부모 컴포넌트로, 포함된 컴포넌트는 자식 컴포넌트로 관계가 구성됩니다.

# 아키텍처

Vue.js 애플리케이션을 구성하는 각 컴포넌트는 하나의 Vue 인스턴스입니다. 공식 문서에 따르면 엄밀히 말해 M.V.VM 패턴과 관련은 없지만, Vue의 디자인은 부분적으로 M.V.VM 패턴에 영감을 받았다고 안내합니다.

# 리엑티비티

Vue.js의 두드러진 특징 중 하나는 반응성(Reactivity) 시스템 입니다. 예를 들어 Model(JavaScript 객체)의 상태가 변경되면 반응성 시스템은 View(DOM)을 자동으로 업데이트 합니다.

예제를 통해 반응성 시스템을 살펴봅시다. (수업에서 다룸)

# 가상 DOM

Vue.js는 실제 DOM에 필요한 변경 사항을 추적 하는 화면에 렌더링 하는 Virtual DOM을 사용합니다. 앞서 살펴봤듯이 Vue.js는 컴포넌트 단위로 개발되며 컴포넌트는 컴포넌트 트리( = 가상 DOM 트리)로 구성됩니다. 각 컴포넌트의 컴포넌트 렌더 함수에서 반환된 가상노드(VNode)가 모여 가상 DOM 트리가 됩니다.

이해를 돕기 위한 에시를 살펴봅시다. (수업에서 다룸)