grace's dev_note

props는 read-only reactive object입니다. 즉, 조회만 가능한 반응형 객체이며, computed 같은 반응성 체크는 가능하지만 props를 직접 수정하는 것은 불가능합니다. v-model을 props로 사용해주기 위해서 vue3는 내부적으로 v-model의 양방향 바인딩을 단방향 바인딩으로 캐스팅해줍니다. 혹은 아래와 같이 computed를 사용해 직접 반응형 객체를 만들어 v-model을 바인딩 할 수도 있습니다. 참고: https://vuejs.org/guide/components/v-model.html

Composable 이란? Vue 애플리케이션에서 “Composable”은 Vue Composition API를 활용하여 상태 저장 비즈니스 로직을 캡슐화 하고 재사용하는 기능을 말합니다. 프론트엔드 애플리케이션을 구축할 때 일반적인 로직을 재사용해야 하는 경우가 종종 있습니다. 예를 들어 여러 곳에서 날짜 형식을 지정해야 한다면 우리는 이러한 로직을 재사용 하기 위해서 함수(모듈)로 추출합니다. 이러한 함수는 상태 비저장 로직을 캡슐화 한 것입니다. 간단한 Input/Output만 있는 구조 입니다. 이러한 상태 비저장 로직를 재사용하기 위한 많은 라이브러리가 있으며, 예를 들어 lodash, dayjs와 같은 것들이 있습니다. 하지만 상태 저장 로직은 사용하면서 변경되는 상태 관리가 포함됩니다. 간단..

동적 컴포넌트 (Dynamic Component) 컴포넌트를 동적으로 변경하고 싶을 때 v-bind:is 속성을 사용해서 변경할 수 있습니다. 동적 컴포넌트는 탭 인터페이스와 같이 컴포넌트간에 동적으로 전환해야 할 때 유용합니다. 위 예시에서 :is 속성에 전달된 값은 다음 중 하나를 포함할 수 있습니다. 등록된 컴포넌트의 문자열 이름 string 실제 가져온 컴포넌트 객체 object 를 사용하여 여러 컴포넌트간 전환하면 컴포넌트의 마운트가 매번 해제됩니다. 이때 내장 컴포넌트를 사용하여 “비활성 컴포넌트"들의 “활성” 상태를 유지할 수 있도록 강제할 수 있습니다. 다음은 vue3에서 script setup을 사용한 동적 컴포넌트 사용 예제입니다. {{ menu.name }} // 컴포넌트 '이름'이 ..

Watch 우리는 종종 반응형 상태가 변경 되었을때에 감지하여 다른 작업(api call 등)을 수행해야 하는 경우가 있습니다. 예를 들어 어떠한 상태가 변경 되었을때 DOM을 변경하거나 비동기 작업을해서 다른 상태를 변경하는 것입니다. Composition API의 watch 함수를 사용 하여 반응형 상태가 변경될 때마다 특정 작업을 수행할 수 있습니다. const message = ref('Hello World'); // message 데이터 변경에 watch(message, (newValue, oldValue) => { console.log('newValue: ', newValue); console.log('oldValue: ', oldValue); // 어떠한 작업을 수행하는 "감시자" 역할을 합..

v-model 프론트엔드에서 입력 양식을 처리할 때 입력 요소의 상태와 자바스크립트의 상태를 동기화해야 하는 경우가 많습니다. value를 바인딩하고 @input이벤트로 text를 변경하는 것은 번거로울 수 있습니다. 그래서 Vue에서는 이러한 작업은 단순화 하도록 양방향을 바인딩할 수 있는 v-model디렉티브를 제공합니다. textarea :value, @input v-model checkbox, radio, select v-model은 내부적으로 HTML 요소가 어떤 요소냐에 따라 서로 다른 속성(:value)과 이벤트(@input)를 사용합니다. input type=”text”와 textarea는 value 속성과 input 이벤트를 사용합니다. checkbox와 radio버튼은 checked 속..

이벤트 처리는 v-on디렉티브로 사용할 수 있습니다. 그리고 v-on이벤트는 자주 사용하기 때문에 @단축 표현으로 많이 사용됩니다. const counter = ref(0); counter {{ counter }} 메소드 이벤트 핸들러 v-on 디렉티브에서 메소드를 호출할 수 있습니다. 그리고 이때 매개변수로 event 객체를 받습니다. const printEventInfo = (event) => { console.log(event.target); console.log(event.target.tagName); }; printEventInfo 이벤트 객체 접근 인라인 핸들링에서 event 객체에 접근할 수 있습니다. 접근하는 방법는 $event 키워드를 사용합니다. const printEventInfo2 ..

디렉티브 (directives) 디렉티브(directives)는 v-접두사가 있는 특수 속성입니다. 그리고 디렉티브(directives)는 그대로 직역하면 지시를 뜻 합니다. 즉, 디렉티브(directives)는 기능상에서 중요한 역할인 컴포넌트(또는 DOM 요소)에게 “~~하게 작동하라” 하고 지시를 해주는 지시문을 말합니다. Vue는 여러내장 디렉티브를 제공합니다. v-text v-html v-show v-if v-else v-else-if v-for v-on (단축표기 @) v-bind (단축표기 :) v-model v-slot (단축표기 #) v-pre v-once v-cloak v-memo (v3.2+) Built-in Directives | Vue.js https://v3.ko.vuejs.or..

v-for v-for 디렉티브를 사용하여 배열인 목록을 렌더링 할 수 있습니다. const items = reactive([ { id: 1, message: 'Java' }, { id: 2, message: 'HTML' }, { id: 3, message: 'CSS' }, { id: 4, message: 'JavaScript' }, ]); {{ item.message }} v-for=”item in items” 문법을 사용해서 배열에서 항목을 순차적으로 할당합니다. v-for=”(item, index) in items” 문법을 사용해서 배열 인덱스를 가져올 수 있습니다. 항목을 나열할 때 각 :key 속성에는 고유한 값을 지정해야 합니다. (vue 2.2.0 부터 필수) v-for 객체 v-for를 사용..

v-if v-if 디렉티브는 조건부로 블록을 렌더링 할 때 사용됩니다. Hello Vue3! v-else v-else 디렉티브는 v-if가 거짓(false)일 때 렌더링 하는 블록입니다. Hello Vue3! Good bye! v-else-if v-else-if는 이름에서 알 수 있듯이 v-if에 대한 ‘else if 블록' 입니다. 여러 조건을 연결할 수 있습니다. A B C Not A/B/C 여러개의 HTML요소를 v-if 디렉티브로 연결하고 싶다면 을 사용할 수 있습니다. Title Paragraph 1 Paragraph 2 v-show 요소를 조건부로 표시하는 또 다른 옵션은 v-show 디렉티브 입니다. Title toggle show v-if vs. v-show v-if는 실제로 렌더링됩니다...

HTML 클래스 바인딩 객체 바인딩 클래스를 동적으로 바인딩 하기위해서는 :class(v-bind:class)를 사용할 수 있습니다. ({ active: isActive.value && !hasError.value, 'text-danger': !isActive.value && hasError.value, })); 배열에 바인딩 배열에 :class를 바인딩하여 클래스 목록을 적용할 수 있습니다. const activeClass = ref('active') const errorClass = ref('text-danger') 인라인 스타일 바인딩 HTML style 속성에 객체값을 바인딩할 수 있습니다. const activeColor = ref('red') const fontSize = ref(30) 템플릿..