v-if 를 사용하여 조건부 랜더링✅ 장점Vue가 필요할 때만 해당 컴포넌트를 생성하므로 불필요한 랜더링이 없다.🟧 단점한 번 v-if로 렌더링을 제거하면 해당 컴포넌트의 상태도 사라지기 때문에 다시 렌더링하면 초기 상태로 돌아간다. A 버튼 B 버튼 v-show를 사용하여 렌더링✅ 장점v-show는 DOM에서 제거되지 않고, CSS display: none;으로 숨김 처리된다.따라서 컴포넌트의 상태가 유지된다. (예: input 입력값 등이 남아있음)🟧 단점모든 컴포넌트가 한 번 렌더링되며, DOM에 계속 남아 있기 때문에 메모리 사용량이 증가할 수 있다. A 버튼 B 버튼 component를 사용하여 렌더링✅ 장점는 동적 컴포넌트 또..
Vue3에서는 상태를 반응형으로 관리할 때 computed와 watch를 사용하는데 동작 방식과 목적이 다르다. ✨ computedcomputed는 어떤 상태(state)로부터 계산된 값을 만들 때 사용한다.ref와 달리 의존하는 값이 변경될 때만 다시 계산되기 때문에 성능 최적화에 유리하다.Composition API를 사용할 때 computed는 ref나 reactive를 기반으로 계산된 값을 반환하는 getter 함수를 받는다.computed는 기본적으로 읽기 전용(read-only) 이지만, getter와 setter를 함께 정의하면 값을 설정할 수도 있다.언제 사용할까❓반응형 상태를 기반으로 새로운 값을 만들 때성능을 고려할 때 (computed는 결과를 캐싱한다.)다른 데이터에서 의존적인 값을..
v-for 사용시 key값 사용하기🚨 Vue 3에서는 사용 시 key가 없으면 경고(warning)가 발생한다.일반적인같은 경우에는 여전히 key 없이도 동작하지만, 사용을 권장한다고 한다.또 다른 주의점은 v-for를 사용할 때 key 값으로 index를 사용하는 것은 몇 가지 문제를 일으킬 수 있다는 점이다. key 값으로 index를 사용시 문제점1. 컴포넌트 상태 유지 문제 Vue는 key를 기준으로 가상 DOM에서 요소를 식별하고 업데이트할지 여부를 결정한다. index를 key로 사용하면 배열이 변경될 때 예상치 못한 상태 유지 문제가 발생할 수 있다. 첫 번째 요소 { id: 1, value: "A" }를 제거하면 id: 2와 id: 3이 한 칸씩 앞으로 이..
✨ Intro새로운 프로젝트는 Vue.js를 사용하게 되어 학습 중 자동완성으로 생성되는 코드 템플릿과 vue 시작시 기본으로 생성되는 HelloWorld.vue 파일의 구조가 달라 궁금증이 생겼다. 기본적으로 *.vue 파일 생성시 vueinit을 입력하면 자동완성으로 코드 템플릿을 사용할 수 있다. 또한, VSCode 확장프로그램 중 Vue VSCode Snippets를 설치하면 아래와 같이 자동완성을 사용할 수 있다. 자세히 보면 모두 template → script → style 순으로 배치되어있다. 하지만 Vue 프로젝트 생성시 자동으로 생성된 HelloWorld.vue파일은 script → template → style 순이다.// src/components/HelloWord.vue ..
