Composition API에서 상태 관리를 하다 보면 ref, reactive만큼 자주 쓰는 게 computed()다.이 함수는 말 그대로 계산된 값을 정의할 때 사용한다. 단순 계산 이상으로 의존하는 값이 변경될 때 자동으로 갱신되는 특성이 있어서, 상태 관리에 큰 도움이 된다.computed()는 어떤 역할을 할까?computed()는 의존하는 값이 바뀌었을 때만 자동으로 다시 계산되는 반응형 계산 속성이다.Vue 2에서는 computed: {}로 정의했지만, Vue 3 Composition API에서는 함수형으로 정의할 수 있다.import { ref, computed } from 'vue'const count = ref(1)const double = computed(() => count.valu..

Vue를 쓰다 보면 이라는 태그를 여기저기서 많이 보게 된다.HTML에서도 은 있지만, Vue에서의 용도는 조금 다르다.Vue에서는 "조건부 렌더링이나 반복 렌더링에서 여러 요소를 묶는 용도"로 사용한다.이 필요한 이유Vue 컴포넌트에서 v-if나 v-for는 기본적으로 하나의 태그에만 적용할 수 있다.하지만 때때로 조건에 따라 여러 개의 태그를 한꺼번에 렌더링하고 싶을 때가 있다.잘못된 예 (Vue가 오류냄)로그인됨환영합니다위 코드는 "로그인됨"은 조건부지만, "환영합니다"는 항상 나오는 구조라 의도한 UI가 아니다.올바른 예 - 으로 묶기 로그인됨 환영합니다은 실제 DOM에 렌더링되지 않고, 내부의 태그만 출력된다.조건문에 여러 태그를 그룹으로 적용할 때 필수적이다. 반복 렌더링(v-for)도 마..

Vue 2 또는 Vue 3 초기 버전에서는 컴포넌트 로직을 작성할 때 보통 이렇게 사용했다. {{ count }}이전 방식은 setup() 함수에서 변수를 정의하고, 다시 return으로 템플릿에 노출해줘야 했기 때문에 구조가 길어지는 단점이 있었다. 또한 export default 구문을 항상 사용해야 했다.Vue 3에서는 {{ count }}이제는 setup() 함수도, return도, export default도 작성할 필요가 없다. {{ msg }}별도의 setup() 함수 없이도 최상위에서 선언한 변수나 함수는 에서 바로 사용할 수 있다. 그리고 return도 생략해도 된다.props와 emits 사용하기기존 방식에서는 props와 emits를 명시적으로 옵션에 선언했지만,  또..

Vue는 대부분의 DOM 조작을 자동으로 처리해준다. 하지만 때때로 DOM 요소에 직접 접근해야 할 상황이 생기기도 한다.예를 들어 요소에 포커스를 주거나, 특정 버튼을 클릭하는 등의 일이 그 예다.이럴 때 Vue에서는 ref라는 특수 속성을 사용할 수 있다.기본 사용법 설명ref="inputRef": 템플릿에서 DOM 요소에 참조 이름을 붙임inputRef = ref(null): 해당 이름과 동일한 ref를 선언onMounted(): DOM이 렌더링된 후에 접근 가능inputRef.value는 실제 DOM 엘리먼트를 가리킴DOM 요소 값 조작하기onMounted(() => { inputRef.value.value = 'Hello, Vue!';});위처럼 .value.value를 사용하면 실제 에 ..

Vue 컴포넌트는 생성부터 제거까지 일정한 흐름을 따라 동작한다. 이 흐름을 라이프사이클(Lifecycle)이라고 하며, 이 흐름의 특정 시점에 맞춰 코드를 실행할 수 있도록 제공되는 함수가 라이프사이클 훅(hook)이다.Composition API에서는 setup() 함수 안에서 훅을 호출해 원하는 타이밍에 동작을 지정할 수 있다. 라이프사이클 훅 사용 예시import { onMounted } from 'vue';export default { setup() { onMounted(() => { console.log('컴포넌트가 마운트되었습니다.'); }); }};Composition API 기준 라이프사이클 정리Options API                            ..

Prop Drilling 문제Vue에서 일반적으로 부모 → 자식으로 데이터를 전달할 때 props를 사용한다.하지만 컴포넌트 구조가 깊어지면 아래처럼 중간 단계의 컴포넌트들이 단순히 전달만을 위한 용도로 props를 받아야 하는 상황이 생긴다. App → DeepChild까지 데이터를 전달하려면 Layout, Footer까지 모두 props를 받아야 한다.이런 문제를 Prop Drilling이라고 부른다.Provide / Inject란?Vue 3에서는 provide()와 inject()를 사용하면 컴포넌트 트리 구조와 상관없이 상위 → 하위로 직접 데이터 전달이 가능하다.상위: provide()를 통해 데이터를 “제공”하위: inject()로 데이터를 “주입받음”중간 컴포넌..