grace's dev_note

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) 템플릿..

Computed 템플릿 문법({{ }})은 간단히 사용하면 매우 편리합니다. 하지만 템플릿 표현식 내 코드가 길어질 경우 가독성이 떨어지고 유지보수가 어려워질 수 있습니다. 예를 들어 아래와 같이 객체가 있는경우: const teacher = reactive({ name: '짐코딩', lectures: [ 'HTML/CSS', 'JavaScript', 'Vue3' ] }) 그리고 에 author가 책을 갖고 있는지 없는지 여부를 표시하고 싶을 경우: 강의가 존재 합니까?: {{ teacher.lectures.length > 0 ? 'Yes' : 'No' }} 이 시점에서 템플릿 표현식은 복잡해지며 선언적이지 않습니다. 또 이러한 코드를 여러곳에서 반복적으로 사용해야 한다면 더더욱 비효율 적일 것입니다. ..

반응형 상태 선언하기 JavaScript 객체에서 반응형 상태를 생성하기 위해서는 reactive() 함수를 사용할 수 있습니다. import { reactive } from 'vue' // 반응형 상태 const state = reactive({ count: 0 }) 컴포넌트 에서 반응형 객체를 사용하는 예제입니다. {{ state.count }} ref로 원시값 반응형 데이터 생성하기 reactive() 함수는 객체타입에만 동작합니다. 그래서 기본타입(number, string, boolean)을 반응형으로 만들고자 할 때 ref 메소드를 사용할 수 있습니다. import { ref } from 'vue' const count = ref(0) ref 메서드는 변이가능한(mutable) 객체를 반환합니..

Setup setup() 함수(hook)는 Composition API 사용을 위한 진입점 역할을 합니다. 그리고 setup 함수는 컴포넌트 인스턴스가 생성되기 전에 실행됩니다. 기본 사용 반응형 API(Reactivity API)를 사용하여 반응형 상태를 선언하고 script setup에서 객체를 반환하여 에 노출할 수 있습니다. setup() 함수를 사용할 수 있지만 SFC와 Composition API를 함께 사용하는 경우 script setup을 사용하는 것을 권장하고 있기에, script setup 사용 기준으로 설명하겠습니다. 반환된 객체의 속성은 구성 요소 인스턴스에서도 사용할 수 있습니다(다른 옵션이 사용되는 경우): {{ count }} Props 접근 setup 함수의 첫 번째 매개변수..