Vue - Component에서 v-model 사용하는 방법

Vue에서는 v-model을 이용해서 양방향 바인딩을 할 수 있는 장점이 있습니다.v-model 기본 사용법기본적으로 아래와 같이 v-model을 이용해서 양방향 바인딩을 할 수 있습니다.  Vue 양방향 바인딩 v-modelVue에서는 양방향 바인딩을 v-model를 이용하여 간단하고 쉽게 할 수 있는 방법이 있습니다. 양방향 바인딩이란? 입력요소의 이벤트를 수신하는 동시에 값을 보내는 방식입니다. 동시에 데이터 통powerku.tistory.com컴포넌트에서 v-model 사용하기v-model 은 기본적으로 modelValue를 prop으로 사용하고 update:modelValue를 이벤트로 사용합니다.아래와 같이 사용하면 양방향 바인딩이 가능합니다. name = value"/> BaseInput.v..

• format_list_bulleted Vue
• · 2024. 6. 15.
• textsms

Vue - 동적 컴포넌트, KeepAlive, activated 사용법

동적 컴포넌트(Dynamic Component) 란?Vue에서는 컴포넌트를 동적으로 사용할 수 있는 방법이 있습니다. 위와 같이 라는 특수 컴포넌트가 있습니다.is Props에 컴포넌트 이름의 문자열이나, 컴포넌트 객체를 넣으면 컴포넌트를 동적으로 만들 수 있습니다. 주로 탭패널이나, 동적으로 변경되어야 할 사항에서 사용합니다.동적 컴포넌트를 이용하여 컴포넌트를 변경하면, 컴포넌트가 변경될 때, unmounted 상태가 됩니다.unmounted 상태가 되면, 이전에 가지고 있었던 데이터들이 손실되게 됩니다. 특정한 탭 패널 같은 경우에는 탭 전환이 일어나도, 이전에 가지고 있었던 데이터를 그대로 사용하고 싶을 때가 있습니다.그럴 경우에 KeepAlive 태그를 사용합니다.  KeepAlive 태그를 ..

• format_list_bulleted Vue
• · 2024. 6. 15.
• textsms

Vue Query 이용해서 서버 상태 관리 하기

Vue Query 란?Vue 에서 비동기 데이터를 fetch, update를 하고 데이터를 캐싱 처리 할 수 있는 훅을 가진 라이브러리입니다.React Query 를 기반으로 만들어졌습니다. React Query - 비동기 상태 관리 라이브러리 알아보기React Query란? React Query는 비동기 상태 관리 라이브러리입니다. React에서 서버의 데이터 fetch를 도와주고 관리할 수 있는 라이브러리입니다. React Query 장점 1. 적은 보일러 플레이트 코드 2. 캐싱 3.powerku.tistory.com장점 Vue에서는 주로 Vuex를 이용하여 전역 상태 관리를 클라이언트에서 하였습니다.하지만, 서버에서 받은 데이터의 상태를 관리할 수 있는 방법이 없었습니다. 서버에서 받은 데이터 변..

• format_list_bulleted Vue
• · 2024. 5. 18.
• textsms

Vue Slot 사용법

Slot 이란? Vue에는 Slot이라는 기능이 있습니다. 부모컴포넌트에서 자식 컴포넌트로 temlplate을 전달할 수 있는 기능입니다. Props를 이용해서 데이터를 전달할 수 있지만, template은 전달할 수 없고, Props 만을 이용해서 각각의 template를 전달하려면 코드가 복잡하고 알아보기 어렵게 됩니다. Slot를 이용하면 공통적인 template를 직관적으로 사용할 수 있습니다. Slot 사용법 Content BaseCard 내부에 작성한 Content 가 slot 태그 내부에 들어가게 됩니다. named Slot 사용법 두개의 template를 사용하고 싶을 때가 있습니다. 아래와 같은 방법으로 사용할 수 있습니다. Header Content header 가 들어갈 곳에는 slo..

• format_list_bulleted Vue
• · 2024. 3. 30.
• textsms

Vue에서 컴포넌트 리렌더링 하는 방법 4가지

개발 중 상태 변화에 따라서 자식 컴포넌트를 새롭게 렌더링 해야 할 필요가 있는 경우가 있습니다. 그럴 경우에 컴포넌트를 리렌더링 하는 방법 4가지를 설명드리겠습니다. 4가지 방법 중 가장 아래에 있는 key를 이용해서 리렌더링 하는 방법을 추천드립니다. 1. reload() 사용하기 화면을 새롭게 다시 그리는 방법입니다. 완전히 모든 컴포넌트와 화면을 다시 그리기 때문에 성능상으로 비효율적입니다. Reload 2. if문 이용하기 아래 코드의 동작 방식을 간단히 설명하면 1. v-if문을 이용해서 컴포넌트를 숨김 2. $nextTick을 이용해서 DOM을 업데이트 합니다. 3. 다시 컴포넌트를 생성하여 렌더링을 합니다. $nextTick 3. $forceUpdate 사용하기 $forceUpdate를 이..

• format_list_bulleted Vue
• · 2023. 12. 5.
• textsms

Vue 반응성 Reactivity 데이터를 추적하는 방법 Proxy 객체

Vue에서 data 옵션을 이용해서 설정한 값은 바로 화면에 렌더링이 됩니다. 값을 변경하면 Vue는 변경을 감지하고, Vue과 관리하는 HTML 코드를 스캔하여 변경사항이 있는 값을 다시 렌더링을 합니다. const app = Vue.createApp({ data() { return { message: 'Hello, Superman', }; }, }); Vue는 어떻게 변경을 감지할까요? 자바스크립트의 내장 기능인 Proxy 객체를 이용해서 변경을 감지합니다. data 옵션으로 설정한 객체를 Proxy 객체로 래핑을 합니다. Proxy로 래핑 한 객체는 내부적으로 data의 속성을 추적하고 있습니다. name 값이 변경이 될 때마다, Vue는 바로 감지할 수 있습니다. const data = { nam..

• format_list_bulleted Vue
• · 2023. 9. 4.
• textsms

Vue3 + Typescript Props interface 사용법 기본값 설정

Props는 자식 컴포넌트에게 데이터를 전달할 수 있는 방법입니다. Vue3에서 타입스크립트를 이용해서 사용할 수 있습니다. Vue3에서 없이 Props 사용하기 export default { props: { name: { type: String, }, age: { type: Number, }, }, }; 으로 Props 사용하기 const props = defineProps({ name: { type: String, }, age: { type: Number, default: 20, }, }); 이 방법으로 사용할 수 있지만, 타입스크립트를 쓰는 의미가 없어서 다른 방법도 있습니다. interface로 타입 정의 하고 Props 사용하기 interface로 타입을 선언하과 defineProps 제네릭타입..

• format_list_bulleted Vue
• · 2023. 8. 25.
• textsms

Vue3 부모에서 자식 데이터 주고 받기 - Composition API

Vue는 부모 자식 컴포넌트 간의 데이터를 서로 전달할 수 있습니다. 양방향 데이터 바인딩이 가능한 장점이 있습니다. 부모에서 자식으로는 Props 옵션을 이용해서 전달하고, 자식에서 부모는 Emit 이벤트를 이용해서 전달합니다. Props와 이벤트를 이용하면 부모 / 자식 관계에서 데이터를 서로 주고받을 수 있습니다. 부모 ➡️ 자식 데이터 전달 1. 부모 컴포넌트에서 데이터 생성 const userName = ref('superman'); 2. 자식 컴포넌트로 데이터 전달 3. 자식 컴포넌트에서 Props 설정 {{ message }} 자식 ➡️ 부모 데이터 전달 1. 자식 컴포넌트에서 이벤트 생성 후 호출 const emit = defineEmits(["update"]) emit("update", ..

• format_list_bulleted Vue
• · 2023. 8. 15.
• textsms

Vue3 - Composables 이용하여 함수 재사용 하기

Composables 란? Vue3에서 Composables 함수를 만들어서 기능을 캡슐화하거나, 재사용할 수 있습니다. Composables, 컴포저블, 훅, 커스텀 훅스, 커스텀 컴포지션 함수 다 동일한 표현입니다. 이 글에서는 Composables로 사용하도록 하겠습니다. Vue3 이전에는 mixins를 이용해서 재사용을 많이 하였습니다. 하지만, mixins의 단점들로 인해서 Composables 라는 새로운 개념이 생겼고, 자바스크립트에서 재사용을 위해 함수를 사용하듯, 함수를 만들어서 재사용할 수 있게 되었습니다. 사용법? 폴더 이름과 자바스크립트 파일을 생성합니다. hooks/alert.js import { ref } from 'vue'; export default function useAl..

• format_list_bulleted Vue
• · 2023. 8. 11.
• textsms

Vue3 반응형 상태 ref, reactive 이란? 어떤 것을 사용해야할까?

Vue2 에서는 data 옵션을 이용해서 데이터 바인딩을 하였습니다. export default { data() { return { name: '파워쿠의 블로그', address: 'https://powerku.tistory.com/' } } } Vue3 에서 Composition API 개념이 추가하면서 ref, reactive라는 개념이 추가 되었습니다. ref 란? ref는 반응형 값을 생성해서, 값이 업데이트가 되면 Vue에서 반응을 해서 DOM을 업데이트 합니다. 값은 문자, 숫자, 불리언, 객체 등 어떠한 값도 다 넣을 수 있습니다. 값을 변경하기 위해서는 .value를 이용해서 변경합니다. template에서는 .value 없이 사용할 수 있습니다. const name = ref('super..

• format_list_bulleted Vue
• · 2023. 8. 10.
• textsms