Vue Router의 동적 세그먼트를 활용한 동적 라우트 매칭🍀 동적 세그먼트란?- 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야할 때 사용한다. 예를 들면 ...사용자 목록/users사용자 상세/users/tay사용자 목록인 /users 에 매핑된다면, 사용자 상세는 /users/tay 처럼 사용자별로 같은 컴포넌트에 매핑되어야 한다.이럴 때 vue router 경로에서 '동적 세그먼트'를 사용하여 해결한다. 🍀 route의 param으로 동적 세그먼트 /users/:id - 동적 세그먼트는 콜론(:)으로 표시한다. - 컴포넌트에서 동적 세그먼트의 값은 $route.params로 접근할 수 있다. route의 param 동적 세그먼트 접근 방법(1) vue router 설정한다. → ..
Vue Router의 router-link와 router-view 간단 정리🌩️Vue Router란?- 싱글 페이지 애플리케이션(SPA)을 구현할 때 사용하는 공식 라우터 라이브러리- url에 따라 어떤 페이지를 보여줄지 매핑해주는 라이브러리 🌩️RouterLink 페이지 이동 컴포넌트- RouterLink는 Vue Router 에서 페이지를 이동할 때 a 태그 대신 사용하는 컴포넌트다.- 목표 위치를 to prop으로 지정한다.- 실제로 a태그를 사용하면 등으로 하드코드되서 를 더 선호된다.- 는 href를 갖는 태그로 렌더링된다. RouterLink의 기본 props이동- to: 링크의 대상을 전달한다.- replace: 클릭시 router.push() 대신 router.replace()를 ..
Dynamic components (동적 컴포넌트)🚗 Dynamic component란렌더링되는 컴포넌트를 동적으로 변경되는 것특정 조건에 따라 다른 컴포넌트를 mount하는 것 🚗 Dynamic component 사용법컴포넌트를 동적으로 변경하고 싶을 때 v-bind: is 속성을 활용한다. (1) 동적 컴포넌트 생성 (2) 동적으로 컴포넌트 변경하기 (shallowRef가 ref 보다 퍼포먼스가 더 좋다)// const currentComp = ref(자식컴포넌트);const currentComp = shallowRef(자식컴포넌트); ※ shallowRef와 ref의 차이둘다 반응형이다.shallowRef는 ref의 얕은 버전이다.shallowRef는 속성에 대해서는 반응하지 않고 값(.va..
vue3 defineProps는 props 옵션과 동일한 값을 허용한다.defineEmits는 emits 옵션과 동일한 값을 허용한다. 특징1. 전달된 옵션을 기반으로 타입 추론을 제공한다.특징2. 전달된 옵션은 setup() 에서 모듈 영역으로 호이스팅된다. 따라서 옵션은 setup() 영역에 선언된 지역 변수를 참조할 수 없다. (컴파일 오류)특징3. 하지만 import 된 옵션은 사용할 수 있다. (import도 모듈 영역이라 호이스팅 되기 때문에) .. 아 졸라 복잡하네특징4. script setup 을 사용하는 컴포넌트는 기본적으로 Template refs나 $parent와 같은 컴포넌트간 통신이 닫힌다. 🍬 script setup 에서의 $slots와 $attrsscript setup ..
Template refs☁ refs를 사용하는 이유vue의 선언적 렌더링 모델 대부분은 직접적인 DOM의 작업을 대신 수행한다. 하지만 때론 기본 DOM 요소에 직접 접근해야 하는 경우, ref 속성을 사용해서 쉽게 접근할 수 있다. 특수 속성 ref에 의해 마운트된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을 수 있다. ☁ refs 접근하기composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 한다. 또한 컴포넌트가 마운트된 후에 접근이 가능하다.template 안에서 input으로 refs 참조에 접근하려는 경우 렌더링 되기 전에는 참조가 null이다.template의 내장 객체 $refs로 refs 참조에 접근할 수 있다. {{ item }}..
