lifecycle
-
[Vue] Composition APIFront-End(Web)/Vue 2022. 3. 12. 05:44
이번에 새로 맡게 된 프로젝트에서는, Nuxt.js(Vue2)에 Composition API를 적용하는 기술스택으로 개발이 되고있다. Vue3가 정식 릴리스되면서 Vue2와의 큰 차이점중 하나인 Composition API에 대해 학습할 필요성을 느꼈다. 두 버전의 문법이 매우 상이했으며, 그래서 Composition API를 모르면 기존의 data(state), computed, methods, lifecycle 등의 기본적인 프로퍼티들마저도 원만하게 사용할 수 없었다. 본격적으로 개발을 시작하기 전에 Composition API의 차이점과 사용법 등을 공부하고자 하여 이 포스팅을 시작하게 되었다. 📗 Composition API 란? Composition API는 컴포넌트 내에서 사용하는 코드구조를 ..
-
[Vue.js] 인스턴스 (Instance), 라이프사이클(LifeCycle)Front-End(Web)/Vue 2021. 5. 26. 02:09
React는 파일(혹은 모듈) 자체를 클래스형, 함수형의 컴포넌트로 제작하는 방식이었다. 이와는 달리, Vue는 컴포넌트를 포함한 다양한 정보가 담긴 인스턴스(new Vue)에 정보를 담는 것으로 보인다. 이에 해당하는 Vue 인스턴스에 대해 학습 및 포스팅할 예정이다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 인스턴스 인스턴스는 뷰로 개발할 떄 필수로 생성해야 하는 코드라고 소개된다. Vue.js로 화면을 구성하기 위해 꼭 생성해야 하는 필수 단위인 것이다. new Vue() // 변수할당 var vm = new Vue({ // options... }); Vue 앱은 Root Vue 인스턴스를 기점으로, 선택적으로 중첩이 가능하고 재사..
-
[React.js] LifecycleFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 27. 17:14
🤷 Lifecycle 이란? 리액트 컴포넌트는 생명주기(Lifecycle)를 가진다. (created, rendered, added to DOM, updated, removed) Lifecycle은 크게 세 가지(Mounting, Updating, Unmounting)로 분류할 수 있으며, 아래 그림을 참고하자. 📒 Lifecycle Methods 컴포넌트에는 Lifecycle을 다루기 위한 단계별 메소드들이 존재한다. (v16.3 이전 버전) Mounting: 컴포넌트가 실행되고 DOM에 추가되는 과정이다. 컴포넌트가 실행되면 우선 context, defaultProps, satae를 결정하고, 'componentWillMount' 메소드를 호출한다. 이후 'render'로 DOM에 컴포넌트를 부착하면..