Vue.js (6) 썸네일형 리스트형 Vue.js 생명주기 훅 정리 – 언제 뭐가 되는지 순서대로 보자 Vue 컴포넌트는 만들어지고, 그려지고, 업데이트되고, 사라지는 일련의 과정을 거쳐. 이걸 Vue에서는 **라이프사이클(Lifecycle)**이라고 부르고, 각 단계마다 특정한 **훅(hook)**을 호출할 수 있다.언제 뭘 할 수 있는지를 알면, 데이터 로딩 타이밍이나 DOM 조작 같은 것도 훨씬 수월하게 할 수 있다! 1. beforeCreateVue 인스턴스가 생성된 직후 가장 먼저 호출되는 단계다.이때는 data, methods, computed 등 옵션들이 아직 정의되지 않은 상태다.Vue 2에서는 props도 접근할 수 없지만, Vue 3에서는 props 값 사용이 가능하다.또한 Vue 3의 컴포지션 API에서는 setup()이 이 훅보다 먼저 호출된다.아무것도 준비되지 않은 시점이라, 보.. [Vue.js] Vue Composition API란 무엇인가? Vue Composition API란 무엇인가?Composition API는 Vue 3에서 공식적으로 도입된 새로운 컴포넌트 작성 방식이다. 기존의 Options API 방식이 아닌, setup() 함수 내에서 reactive state, computed, lifecycle 등을 선언하고 조작할 수 있도록 한다.Composition API는 코드의 응집도를 높이고, 기능별로 관련된 로직을 하나의 함수 블록 안에 묶을 수 있기 때문에, 규모가 큰 애플리케이션에서도 가독성과 유지보수 측면에서 유리한 구조를 제공한다.Vue 2에서의 사용Vue 2에서도 Composition API를 사용할 수 있다. 다만 별도의 플러그인 설치가 필요하다. 다음과 같이 패키지를 추가하면 된다.npm install @vue/com.. Vue에서 커스텀 디렉티브 만들기 – 직접 만든 v-detect 예시로 이해해보자 Vue에서 커스텀 디렉티브 만들기 — v-detect 예제Vue에서는 v-if, v-for처럼 v-로 시작하는 디렉티브를 통해 HTML 요소에 특정 동작을 지정할 수 있다.그리고 기본 디렉티브 외에도, 직접 커스텀 디렉티브를 만들어서 사용할 수 있다.이번에는 사용자가 input에 특정 단어를 입력했을 때, 그 단어를 치환해주는 간단한 디렉티브를 만들어보자.1. main.vue — 커스텀 디렉티브 사용 {{ content }} v-detect라는 커스텀 디렉티브를 input 요소에 적용했다.detect 디렉티브 객체를 외부 파일에서 import해서 directives 옵션에 등록했다.2. common.js — 디렉티브 정의export const detect = { mounted: (el.. Vue.js 상태관리 라이브러리, Vuex Vuex는 Vue 애플리케이션을 위한 상태관리 라이브러리다.store라는 중앙 저장소에 데이터를 보관하고, 모든 컴포넌트에서 해당 데이터를 공유하고 사용할 수 있게 도와준다.기존에는 컴포넌트 간에 데이터를 주고받기 위해 props나 event bus를 사용했지만, 컴포넌트가 많아질수록 구조가 복잡해지고 관리가 어려워진다.이러한 문제를 해결하기 위해 Vuex를 통해 중앙에서 상태를 관리하는 것이 훨씬 효율적이다.1) Gettersgetters는 state에서 데이터를 가져오는 함수다.Vue의 computed 속성과 유사하며, getter의 결과는 의존성 기반으로 캐시된다.즉, 의존하고 있는 state 값이 바뀔 때에만 다시 실행된다.2) Mutationsmutation은 state를 직접 변경하는 유일한 .. [Vue.js] Component 1) 컴포넌트 기본 구성 2) 컴포넌트 사용하기 3) 부모 → 자식 : props로 데이터 전달자식 컴포넌트에서 받을 props를 선언하고, 부모 컴포넌트에서 데이터를 바인딩한다.// 자식 컴포넌트Vue.component('ChildComponent', { props: ['message'], template: `{{ message }}`})// 부모 컴포넌트4) 자식 → 부모 : $emit() 으로 이벤트 전달5) 이벤트 버스(Event Bus) 사용하기전역 Vue 인스턴스를 이벤트 버스로 활용하여 컴포넌트 간 데이터 전달 가능// event-bus.jsimport Vue from 'vue';export const EventBus = new Vue();// 이벤트 발행EventBus.$emit('.. [Vue.js] Instance, directive A) Vue.js 인스턴스 1) 뷰 인스턴스 template 뷰 instance에서 정의한 데이터와 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속서 methods 마우스 클릭이나 버튼 클릭과 같은 이벤트 처리하는 동적인 작업 처리 ( 사용자가 이벤트를 함 ) computed data 객체 내 프로퍼티에 변화가 발생할 때마다 변화됨 => React의 useEffect와 같음 props 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. watch data 객체 내의 데이터를 모니터링 할 수 있다. 특정 데이터에 변화가 생길 시 후속 처리 가능하다. 한페이지내의 인스턴스가 서로 격리되어있지 않기 때문에 하나의 뷰 인스턴스에 있는 데이터에 변화가 생길 경우, .. 이전 1 다음
