Vue CLI와 Vue router

1. SFC

(1) Component

• 기본 HTML element를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움을 줌
• 유지보수를 쉽게 만들어 줄 뿐만 아니라, 재사용성의 측면에서도 매우 강력한 기능을 제공
• Vue 컴포넌트 === Vue 인스턴스

(2) SFC

• Single File Component
• Vue의 컴포넌트 기반 개발의 핵심 특징
• 하나의 컴포넌트는 .vue 확장자를 가진 하나의 파일 안에서 작성되는 코드의 결과물
• 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코드를 하나의 파일(.vue)에서 관리
• .vue 확장자를 가진 싱글 파일 컴포넌트를 통해 개발하는 방식
• Vue 컴포넌트 === Vue 인스턴스 === .vue파일

(3) Vue Component 구조

• 한 화면 안에서도 기능 별로 각기 다른 컴포넌트가 존재
  - 하나의 컴포넌트는 여러 개의 하위 컴포넌트를 가질 수 있음
  - Vue는 컴포넌트 기반의 개발 환경 제공
• Vue 컴포넌트는 const app = new Vue({})의 app을 의미하며 이는 Vue 인스턴스

---

2. pass props & emit events

(1) 컴포넌트 작성

• Vue app은 자연스럽게 중첩된 컴포넌트 트리로 구성됨
• 컴포넌트간 부모-자식 관계가 구성되며 이들 사이에 필연적으로 의사소통이 필요함
• 부모는 자식에게 데이터를 전달 (pass props)하며, 자식은 자신에게 일어난 일을 부모에게 알림 (emit event)
  - 부모와 자식이 명확하게 정의된 인터페이스를 통해 격리된 상태를 유지할 수 있음
• props는 아래로, events는 위로
• 부모는 props를 통해 자식에게 데이터를 전달하고, 자식은 events를 통해 부모에게 메시지를 보냄

(2) 컴포넌트 구조

1. 템플릿 (HTML)
   • HTML의 body 부분
   • 각 컴포넌트를 작성
2. 스크립트 (JavaScript)
   • JavaScript가 작성되는 곳
   • 컴포넌트 정보, 데이터, 메서드 등 vue 인스턴스를 구성하는 대부분이 작성됨
3. 스타일 (CSS)
   • CSS가 작성되며 컴포넌트의 스타일을 담당

(3) 컴포넌트 등록

1. 불러오기 (import)
2. 등록하기 (register)
3. 보여주기 (print)

(4) Props

• 부모(상위) 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성
• 자식(하위) 컴포넌트는 props 옵션을 사용하여 수신하는 props를 명시적으로 선언해야 함
• 데이터는 props 옵션을 사용하여 자식 컴포넌트로 전달됨
• 자식 컴포넌트의 템플릿에서 상위 데이터를 직접 참조할 수 없음
• Static Props 작성
  - 자식 컴포넌트에 보낼 prop 데이터 선언
  - prop-data-name="value"
  - 수신할 prop 데이터를 명시적으로 선언 후 사용
• Dynamic Props 작성
  - v-bind directive를 사용해 부모의 데이터의 props를 동적으로 바인딩
  - :prop-data-name="value"
  - 부모에서 데이터가 업데이트 될 때마다 자식 데이터로도 전달됨
  - 수신할 prop 데이터를 명시적으로 선언 후 사용
• Props 이름 컨벤션
  - 선언 시 : camelCase
  - HTML : kebab-case
• 단방향 데이터 흐름
  - 모든 props는 하위 속성과 상위 속성 사이의 단방향 바인딩을 형성
  - 부모의 속성이 변경되면 자식 속성에게 전달되지만, 반대 방향으로는 안됨

(5) Emit event

• $emit(eventName)
  - 현재 인스턴스에서 이벤트를 트리거
  - 추가 인자는 리스너의 콜백 함수로 전달
• 부모 컴포넌트는 자식 컴포넌트가 사용되는 템플릿에서 v-on을 사용하여 자식 컴포넌트가 보낸 이벤트를 청취
• Emit event 작성
  - this.$emit('이벤트이름', this.넘길데이터)
  - 현재 인스턴스에서 $emit 인스턴스 메서드를 사용해 이벤트를 트리거
  - @이벤트이름="콜백함수"
  - 부모 컴포넌트는 자식 컴포넌트가 사용되는 템플릿에서 v-on directive를 사용하여 자식 컴포넌트가 보낸 이벤트를 청취
• event 이름 컨벤션
  - 컴포넌트 및 props와는 달리, 이벤트는 자동 대소문자 변환을 제공하지 않음
  - 이벤트 이름에는 항상 kebab-case 사용하기

---

3. Vue Router

• route에 컴포넌트를 매핑한 후, 어떤 주소에서 렌더링할 지 알려줌
• SPA 상에서 라우팅을 쉽게 개발할 수 있는 기능을 제공

(1) Vue Router

1. index.js
   • 라우트에 관련된 정보 및 설정이 작성되는 곳
2. <router-link>
   • 사용자 네비게이션을 가능하게 하는 컴포넌트
   • <router-link to="/">Home</router-link>
   • 목표 경로는 to prop으로 지정됨
3. <router-view>
   • 주어진 route에 대해 일치하는 컴포넌트를 렌더링하는 컴포넌트
   • 실제 컴포넌트가 DOM에 부착되어 보이는 자리를 의미
   • router-link를 클릭하면 해당 경로와 연결되어 있는 index.js에 정의한 컴포넌트가 위치

(2) History mode

• HTML History API를 사용해서 router를 구현한 것
• 브라우저의 히스토리는 남기지만 실제 페이지는 이동하지 않는 기능을 지원
• 페이지를 다시 로드하지 않고 URL을 탐색할 수 있음

(3) 종류

1. Named Routes
   • 이름을 갖는 route
   • 명명된 경로로 이동하려면 객체를 vue-router 컴포넌트 요소의 prop에 전달
   • <router-link :to="{ name: 'home' }">Home</router-link>
2. 프로그래밍 방식 네비게이션
   • <router-link>를 사용하여 선언적 탐색을 위한 a 태그를 만드는 것 외에도, router의 인스턴스 메서드를 사용하여 프로그래밍 방식으로 같은 작업을 수행할 수 있음
   • 선언적 방식 : <router-link to="...">
   • 프로그래밍 방식 : $router.push(...)
router.push('home') : 문자열
     router.push({ path: 'home' }) : 객체
     router.push({ name: 'user', params: { userId: '123' } }) : 명명된 경로
     router.push({ path: 'register', query: { plan: 'private' } }) : 쿼리
3. Dynamic Route Matching
   • 동적 인자 전달
   • 주어진 패턴을 가진 route를 동일한 컴포넌트에 매핑해야 하는 경우

   • const routes = [
     	{
     		path: '/user/:userId',
         	name: 'user',
         	component: User
         },
     ]

   • 동적 인자는 :으로 시작
   • 컴포넌트에서 this.$route.params로 사용 가능
     

(4) components와 views

• 기본적으로 작성된 구조에서 components 폴더와 views 폴더 내부에 각기 다른 컴포넌트가 존재하게 됨
• App.vue
  - 최상위 컴포넌트
• views/
  - router에 매핑되는 컴포넌트를 모아두는 폴더
• components/
  - router에 매핑된 컴포넌트 내부에 작성하는 컴포넌트를 모아두는 폴더