- 라이프 사이클(lifecycle) Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계 - 라이프 사이클 훅(lifecycle hooks) 각 라이프 사이클 단계에서 실행되는 함수들 Composition API에서 각각의 훅은 setup() 내부에서 onXX 형태로 접근 가능 Composition API의 생명주기 훅은 Option API와 다르게 beforeCreate와 created가 없음 부모 순으로 mounted hooks가 실행 - onBeforeUpdate 반응형 상태가 변함에 따라 DOM tree를 업데 이트 하기 전에 호출 가상 DOM이 렌더링, 패치되기 전에 데이터가 변경될 때 호출 여기서 DOM 접근해서 읽기 용도로 사용, 써도 반영 되지 않음 컴포넌트 상태 값을 바꾸면 DOM에..

- Composition API vs Option API Option API 방식은 객체지향 중심의 접근 방식이고, Composition API 방식은 논리 중심의 접근 방식 - Option API Vue.js 2.x 버전에서 사용 태그 내에서 Vue에서 사용하기 위한 하나의 Options 객체를 만들어서 export 시킴 Options 객체 내부에서는 data, methods 등 성격에 따라 미리 지정된 속성에 객체 또는 함수로 작성하고 내부에서 다른 요소를 참조할 때는 this를 이용 실질적인 data를 다루는 data(), 함수를 다루는 methods, 캐싱 처리된 computed 등의 객체를 사용하여 컴포넌트 로직을 정의 컴포넌트에 수많은 데이터가 공존한다면 methods, computed도 많아..

- Vuex 상태(state)를 관리하는 라이브러리 Vue.js 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 - 상태(state) 어떤 객체가 가진 데이터(data) Vue.js에서는 컴포넌트(객체)의 data가 상태 지역적으로는 props와 emit으로 컴포넌트 내 데이터 전달 전역적으로는 vuex 스토어에 저장하던지 브라우저의 쿠키 또는 로컬 스토리지에 저장하여 데이터 공유 - Vuex로 상태 관리를 해야하는 이유 Vue.js에서 부모는 props를 통해 자식에게 데이터를 전달하고, 자식은 events(emit)를 통해 부모에게 전달 props는 아래로, events 위로 전달 규모가 크고 복잡한 앱일수록 1. props, emit 이 거쳐야 할 컴포넌트가 많아짐 2. Event Bu..