본문 바로가기

⭐ Personal_Study/Vue23

Lifecycle Hooks Lifecycle Hooks 개요 ✔ 각 Vue 인스턴스는 생성과 소멸의 과정 중 단계별 초기화 과정을 거침 Vue 인스턴스가 생성된 경우, 인스턴스 DOM에 마운트하는 경우, 데이터가 변경되어 DOM을 업데이트 하는 경우 등 ✔ 각 단계가 트리거가 되어 특정 로직을 실행할 수 있음 ✔ 이를 lifecycle hook이라 한다 Lifecycle Hooks created ✔ Vue instance가 생성된 후 호출됨 ✔ data, computed등의 설정이 완료된 상태 ✔ 서버에서 받은 데이터를 vue instance의 data에 할당하는 로직을 구현하기에 적합 ✔ 단, mount되지 않아 요소에 접근할 수 없음 export default { ... created() { this.getDogImage() .. 2022. 11. 14.

Vuex Vuex State Management State Management(상태 관리) 개요 ✔ 상태(state): 현재에 대한 정보(data) ✔ Web Application의 상태: 현재 App이 가지고 있는 data ✔ 각 component는 독립적이기 때문에 각각의 상태(data를 가진다) ✔ 하지만 결국 component들이 모여 하나의 App을 구성하므로 여러 개의 component가 같은 상태(data)를 유지해야 한다! Pass Props & Emit Event ✔ 데이터의 흐름을 직관적으로 파악 가능하다 ✔ 그러나 component의 중첩이 깊어지면 데이터의 전달이 어려워진다는 단점 Centralized Store ✔ 중앙 저장소(store)에 데이터를 모아서 상태 관리 ✔ component의.. 2022. 11. 14.

Emit Event Emit Event Emit Event 개요 ✔ 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 이벤트를 발생 시킨다. 데이터를 이벤트 리스터의 콜백함수 인자로 전달 상위 컴포넌트는 해당 이벤트를 통해 데이터를 받음 Emit Event 기초 ... 클릭! This is my Component 흐름 정리 자식 컴포넌트에 있는 버튼 클릭 이벤트를 청취하여 연결된 핸들러 함수(childToParent) 호출 호출된 함수에서 $emit을 통해 상위 컴포넌트에 이벤트(child-to-parent) 발생 상위 컴포넌트는 자식 컴포넌트가 발생시킨 이벤트(child-to-parent)를 청취하여 연결된 핸들러 함수(parentGetEvent) 호출 Emit with Data ... 클릭! ✔ 이벤트를 발생(em.. 2022. 11. 13.

Pass Props Pass Props Data in components Data in components 개요 ✔ 완전히 동일한 data를 서로 다른 Component에서 보여주는 방법?! ✔ 컴포넌트는 부모-자식 관계를 가지고 있으므로, 부모-자식 관계만 데이터를 주고 받게 설정! ✔ 데이터 흐름 파악 용이 ✔ 유지 보수 용이 pass props & emit event ✔ 부모 -> 자식으로의 데이터 흐름 pass props ✔ 자식 -> 부모로의 데이터 흐름 emit event Pass Props 개요 ✔ 요소의 속성(property)를 사용하여 데이터 전달 ✔ props는 부모(상위) 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성 ✔ 자식(하위) 컴포넌트는 porps 옵션을 사용하여 수신하는 props를 명시적으.. 2022. 11. 12.

Vue Component Vue Component Vue Component 구조 ✔ 템플릿(HTML) HTML의 body 부분 눈으로 보여지는 요소 작성 다른 컴포넌트를 html요소 처럼 추가 가능 ✔ 스크립트(JavaScript) JavaScript 코드가 작성되는 곳 컴포넌트 정보, 데이터, 메서드 등 vue 인스턴스를 구성하는 대부분이 작성된다. ✔ 스타일(CSS) CSS가 작성되며 컴포넌트의 스타일을 담당 구조 정리 ✔ 컴포넌트들이 tree 구조를 이루어 하나의 페이지를 만든다. ✔ root에 해당하는 최상단의 component가 App.vue ✔ 이 App.vue를 index.html과 연결 ✔ 하나의 페이지만들 rendering -> SPA Vue component 실습 MyComponentj.vue // MyComp.. 2022. 11. 11.

SFC (Single File Component) SFC Component Component 개요 ✔ UI를 독립적이고 재사용 가능한 조각들로 나눈 것 즉 기능별로 분화한 코드 조각 ✔ CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 ✔ 하나의 app을 구성할 때 중첩된 컴포넌트들의 tree를 구성하는 것이 보편적! ✔ 유지보수를 용이, 재사용성 향상 Component based architecture의 특징 ✔ 관리 용이 ✔ 재사용성 ✔ 확장 가능 ✔ 캡슐화 ✔ 독립적 Component in Vue ✔ 이름이 있는 재사용 가능한 Vue instance ✔ new Vue() SFC(Single File Component) ✔ 하나의 .vue파일이 하나의 Vue instace이고, 하나의 컴포넌트! ✔ Vue instan.. 2022. 11. 11.

이전 1 2 3 4 다음

티스토리툴바