반응형 vue34 vue3 ref와 reactive 사용법과 차이점 Options API는 data, methods, mounted 와 같은 옵션을 사용. (vue3 이전 버전)Composition API는 반응형 코드를 작성하는 단일 setup 함수가 있음. (vue3)composition api는 vue 컴포넌트를 작성할 수 있는 api세트이다. 그 중 ref와 reactive는 컴포넌트와 별개로 사용할 수 있는 반응형 데이터를 생성할 수 있다. ref는 premity type(string, number, object) 어떠한 타입도 사용할 수 있고,reactive는 object, array, map, set과 같은 타입에서만 사용할 수 있다. 객체를 선언할때 둘 다 사용할 수 있는데, ref를 사용하면 객체를 한꺼번에 객체 할당할 수 있다.반대로 reactive.. 2024. 8. 5. Components(1) 나눠져 있는 섹션들을 다른 파일로 구분해서 따로 관리를 한다. 한 화면을 만들기 위해서 각각의 화면을 분리하여 필요할 때 사용한다. 자주 사용되는 내용의 컴포넌트는 별도의 파일로 분리하고 해당 부분만 불러와서 사용할 수 있는것이 컴포넌트이다. [컴포넌트 규칙] components 이름 작성 방법 - import 시에도 컴포넌트 명 작성시 지켜야할 규칙 1. 의미가 있는 단어의 네이밍 2. 2가지의 단어가 조합된 네이밍 3. 대문자로 시작하고, 카멜케이스로 작성한다. [vue파일에서 style scope] - 해당 파일에서만 적용 가능한 style로 scope를 줌 컴포넌트로 props 넘기는 방법 정적 데이터 전송 : username이 넘겨주고자 하는 값은 name인 string 데이터이다. 데이터를 전.. 2023. 1. 6. fetching data (vue.js) (현재 셋팅 상태: json-server를 사용하여 가상 데이터를 생성했음) 이제 vue에서 데이터를 패칭을 할 때 어떻게 해야하는지 알아보자. vue의 생명주기에서 페이지가 로딩시에 진행되는 순서를 다시 생각해보면, 부모 created -> 자식 created -> 자식 mounted -> 부모 mounted 이 상태를 잘 기억하고 있어야 한다. created는 인스턴스가 작성이 된 후에 동기적으로 호출된다. 데이터 초기화 선언시에 주로 created를 사용하는데 가상돔을 사용할 수 없는 상태이다. mounted는 인스턴스가 마운트 된 직후이기에 가상돔을 핸들링 할 수 있는 상태이다. * [ 먼저, 데이터를 가져오려면 언제 어디서 얻을 수 있는지?] dom을 생성할 때 실행되는 생명주기 훅인 mount.. 2022. 12. 26. Lifecycle Hooks (vue.js) Lifecycle Hooks이란? 컴포넌트에서 생명주기 기능(생성, 수정, 소멸)의 과정을 말한다. 대표적인 경우 템플릿을 컴파일 하는 경우 데이터 설정이 필요한 경우 컴포넌트를 dom에 마운트 하는 경우 데이터가 변경되어 dom을 업데이트 하는 경우 Lifecycle Hooks 단계 크게 created, mounted, updated, destroyed 4단계로 나뉘어 진다. creation: 생성 단계 DOM이 생성되기 전 단계 beforeCreate, created 다른 훅과 달리 서버 렌더링 과정 중에도 실행이 된다. [beforeCreate] - 라이프사이클에서 가장 먼저 실행된다. - 컴포넌트가 DOM에 가장 처음으로 추가되기 전 상태를 말한다. - 컴포넌트가 DOM에 추가되기 전이기 때문에 .. 2022. 12. 25. 이전 1 다음 728x90 반응형
