[Vue] Vue Data Management

Data in components

• 동적 웹페이지를 만들기 위해 웹페이지에서 데이터를 다뤄야 한다.
• 한 페이지 내에서 같은 데이터를 공유 해야 하지만 페이지들은 component로 구분되어 있다.
• 필요한 컴포넌트들 끼리 데이터를 주고 받으면 데이터의 흐름을 파악하기 힘들고 개발 속도가 저하되며 유지보수 난이도가 증가한다.
• 컴포넌트는 부모-자식 관계를 가지고 있으므로, 부모-자식 관계만 데이터를 주고 받게하면 데이터의 흐름을 파악하기 용이하고 유지 보수하기 쉬워진다.
• 부모 => 자식으로의 데이터 흐름 : pass props방식 / 자식 => 부모로의 데이터 흐름 : emit event 방식
• 모든 props는 부모에서 자식으로 단반향 바인딩을 형성한다.
• 하위 컴포넌트가 실수로 상위 컴포넌트 상태를 변경하여 앱의 데이터 흐름을 이해하기 힘들게 만드는 것을 방지하기 위함이다.

Pass Props

• 요소의 속성(property)을 사용하여 데이터를 전달한다.
• props는 부모(상위) 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성이다.
• 부모에서 넘겨주는 props 는 kebab-case(HTML속성명은 대소문자를 구분하지 않기 때문에)
• 자식에서 받는 props는 camelCase
• 부모 템플릿(html)에서 kebab-case로 넘긴 변수를 자식의 스크립트(vue)에서 자동으로 camelCase로 변환하여 인식한다.

props in HelloWorld 실습

1. 부모.vue 작성

2. 자식.vue 작성

3. 결과 확인

Dynamic props

• 변수를 props로 전달할 수 있으며, v-bind directive를 사용해 데이터를 동적으로 바인딩한다.
• 부모 컴포넌트의 데이터가 업데이트 되면 자식 컴포넌트로 전달되는 데이터 또한 업데이트 된다.
• 컴포넌트의 data는 함수여야 한다 : 각 vue 인스턴스는 같은 data객체를 공유하므로 새로운 data객체를 반환(return)하여 사용해야 한다.

Dynamic props 실습

1. 부모.vue 작성

2. 자식.vue 작성

3. 결과 확인

Emit Event

• 이벤트를 발생시키면 데이터를 전달하는 방법으로 $emit 메서드를 통해 이벤트를 발생시킨다.
• emit 메서드는 자식 컴포넌트에서 이벤트를 발생시키고, 부모 컴포넌트에서 해당 이벤트를 수신할 수 있도록 한다.
• 데이터를 이벤트 리스너의 콜백함수의 인자로 전달한다.
• 상위 컴포넌트는 해당 이벤트를 통해 데이터를 받는다.
• Emit Event 실습




Emit with Data

1. 자식 컴포넌트에 있는 keyup.enter 이벤트를 청취하여 연결된 핸들러 함수(ChildInput) 호출
2. 호출된 함수에서 $emit을 통해 부모 컴포넌트에 이벤트(child-input)를 발생
• 이벤트에 v-model로 바인딩 된 입력받은 데이터를 전달
3. 상위 컴포넌트는 자식 컴포넌트의 이벤트(chilt-input)를 청취하여 연결된 핸들러 함수(getDynamicData)호출, 함수의 인자로 전달된 데이터가 포함되어 있다.
4. 호출된 함수에서 console.log(`~입력받은 데이터~`) 실행

pass props / emit event 컨벤션

• HTML 요소에서 사용할 때는 kebab-case / JavaScript에서 사용할 때는 camelCase

props

• 상위 => 하위 흐름에서 HTML 요소로 내려줄 때 : kebab-case
• 하위에서 받을 때 JavaScript에서 받는다. : camelCase

emit

• emit 이벤트를 발생시키면 HTML 요소가 이벤트를 청취한다. : kebab-case
• 메서드, 변수명 등은 JavaScript에서 사용한다. : camelCaseo

Lifecycle Hooks

• 각 Vue 인스턴스는 생성과 소멸의 과정 중 단계별 초기화 과정을 거친다.
• Vue 인스턴스가 생성 된 경우, 인스턴스를 DOM에 마운트하는 경우, 데이터가 변경되어 DOM을 업데이트 하는 등
• 각 단계가 트리거가 되어 특정 로직을 실행 할 수 있는데, 이를 Liftcycle Hooks라고 한다.

Vue.js에서 Lifecylce은 크게 생성(craetion), 갱신(update), 파괴(destruction)에 따라 분류된다.

• 생성(Creation)
  • beforeCreate: 인스턴스가 생성되고 데이터가 초기화되기 전에 호출된다.
  • created: 인스턴스가 생성되고 데이터가 초기화된 후에 호출된다.
  • beforeMount: 인스턴스가 화면에 마운트되기 전에 호출된다.
  • mounted: 인스턴스가 화면에 마운트된 후에 호출된다.
• 갱신(Update)
  • beforeUpdate: 데이터가 변경되고 화면에 다시 렌더링되기 전에 호출된다.
  • updated: 데이터가 변경되고 화면에 다시 렌더링된 후에 호출된다.
• 파괴(Destruction)
  • beforeDestroy: 인스턴스가 파괴되기 전에 호출된다.
  • destroyed: 인스턴스가 파괴된 후에 호출된다.