컴포지션

Vue3 lifeCycle는 어떤 방식으로 동작할까?

모든 일에는 라이프사이클이 있다. 기획서를 쓰건, 영상을 만들건, 사업을 하던 말이다. 모든 일들이 그렇겠지만 어떻게 굴러가는지 알아야, 잘 굴릴 수 있다. 그래서 이번에는 vue3의 생애주기에 대해서 공부한 내용을 정리해보고자 한다. Lifecycle Hooks - 수명주기, 생명주기 컴포넌트를 만들기만 하면 되는거 아니야? 왜 생애주기에 대해서 알아야할까? 물론 컴포넌트를 만들고, state, props를 사용해서 데이터를 변경하는 것만으로도 간단한 웹을 만들 수 있다. 다시 생각해보면 그 정도로는 간단한 웹만을 만들 수 밖에 없다는 뜻이기도하다. 결론부터 이야기해보자면, 프로그램에 대한 통제권을 가지기 위해서다. 라이프 사이클을 앎으로서, 컴포넌트의 생성, 변화하는 일련의 프로세스를 통제할 수 있게..

컴포지션 API, setup() 기초 사용법과 개념

vue의 기본 vue는 한 파일안에서 스크립트, 마크업, 스타일을 작성할 수 있는 SFC(single file component) .vue 문법을 지원한다. 즉, HTML, CSS ,JavaScript를 하나로 합친 셈이다. 내부에 있는 블록들은 컴포넌트의 뷰, 로직, 및 스타일을 캡슐화해서 배치한다. 다음은 간단한 SFC 구조다. {{ greeting }} Vue는 기본적으로 컴포넌트 모듈을 객체 형태로 선언하며 props 정의, data, methods, 라이프사이클(mounted, updated, beforeUnmount, …), computed, watch 등의 기능을 객체의 속성과 메소드를 사용해서 선언한다. 이와 같은 방식을 Option API라고 부르는데, 속성별로 역할과 책임이 분명히 나눠..