Front

동적 컴포넌트 (Dynamic Component)컴포넌트를 동적으로 변경하고 싶을 때 v-bind:is 속성을 사용해서 변경할 수 있습니다. 동적 컴포넌트는 탭 인터페이스와 같이 컴포넌트간에 동적으로 전환해야 할 때 유용합니다.위 예시에서 :is 속성에 전달된 값은 다음 중 하나를 포함할 수 있습니다.등록된 컴포넌트의 문자열 이름 string실제 가져온 컴포넌트 객체 object 💡 를 사용하여 여러 컴포넌트간 전환하면 컴포넌트의 마운트가 매번 해제됩니다. 이때 내장 컴포넌트를 사용하여 “비활성 컴포넌트"들의 “활성” 상태를 유지할 수 있도록 강제할 수 있습니다.

내부 코드는 컴포넌트의 setup() 함수 안의 코드로 컴파일 됩니다.컴포넌트를 처음 가져올 때 한 번만 실행되는 일반 {{ msg }} import 된 자원(Component, Utils 등)도 동일한 방식으로 에서 직접 사용할 수 있습니다. ReactivityReactivity APIs(ref, reactive, computed, watch 등) 를 defineProps() & defineEmits()defineProps()와 defineEmits() APIs를 defineProps와 defineEmits는 expose는 일반 slots과 attrs 는 일반 Top-level awaitvue/setup-compiler-macrosdefineProps 및 defineEmits와 같은 컴파일러 매크로..

Vue의 선언적 렌더링 모델은 대부분의 직접적인 DOM의 작업을 대신 수행합니다. 하지만 때론 기본 DOM요소에 직접 접근해야 하는 경우가 있을 수 있습니다. 이때 ref 특수 속성을 사용해서 쉽게 접근할 수 있습니다.HTML복사input type="text" ref="input" /> ​ref는 특수 속성입니다. 이 ref 특수 속성을 통해 마운트된 DOM 요소 또는 자식 컴포넌트에 대한 참조를 얻을 수 있습니다.Refs 접근하기Composition API로 참조를 얻으려면 동일한 이름의 참조를 선언해야 합니다. 컴포넌트가 마운트된 후에 접근할 수 있습니다.  안에서 input으로 Refs참조에 접근하려는 경우 렌더링되기 전에는 참조가 null일 수 있습니다.  안에서 $refs 내장 객체로 Refs ..

Lifecycle Hooks 각각의 Vue 컴포넌트 인스턴스는 생성되고 소멸될 때 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클 훅(lifecycle)이라 합니다. 라이프사이클 훅(Lifecycle hooks)은 라이프사이클 단계에서 개발자가 자신의 코드를 추가할 수 있는 계별 기능(function)입니다. Lifecycle 다이어그램 다음은 인스턴스 수명 주기에 대한 다이어그램입니다. 지금 진행 중인 모든 것을 완전히 이해할 필요는 없지만 더 많이 배우고 구축함에 따라 유용한 참고 자료가 될 것입니다. Lifecycle hooks 등록 컴포넌트가 렌더링을 완료하고 DOM 노드를 만든 후 onMounted hooks를 사용하여 코드를 실행할 수 있습니다. import { onMounte..

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 Props를 사용해서 데이터를 전달했다. 그런데 전달해야 하는 Props의 길이가 깊다면? 그것도 깊이가 아주 깊다면? 이런 경우에는 모든 컴포넌트 사이에 Props를 전달 해야함으로 굉장히 번거롭다. 중간에 있는 컴포넌트는 단순히 하위 컴포넌트에 데이터를 전달하기 위해 Props를 선언해야 한다. 이렇게 하위 컴포넌트를 단순히 Props를 전달하기 위한 컴포넌트로 쓰는걸 Prop Drilling 이라고 한다. 이런 문제를 해결할수 있는것이 바로 Provide와 Inject다. 이걸 사용하면 계층구조의 깊이에 상관없이 모든 자식 컴포넌트에 데이터를 전달 할 수 있다. Prop Drilling 일반적을 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 ..

Slot 이란? HTML 요소와 마찬가지로 우리가 만든 컴포넌트에 콘텐츠를 전달할 수 있으면 유용합니다. 컴폰넌트를 만든 후 콘텐츠를 전달해 보도록 하겠습니다. slot을 사용하는 방법은 매우 간단합니다. 컨텐츠를 위치하게 하고 싶은곳에 컴포넌트를 배치 시키면 됩니다. 그리고 사용하는 쪽에 아래 예시처럼 컨텐츠를 넣으면 됩ㄴ디ㅏ. 위에 정의한 컴포넌트를 부모 컴포넌트에서 사용해 보겠습니다. Click!! 여기서 작성된 콘텐츠는 이 선언된 위치에서 그대로 사용됩니다. 요소는 부모 컴포넌트에서 제공하는 콘텐츠를 나타내는 슬롯 콘텐츠 입니다. 그리고 슬롯은 텍스트뿐만아니라 HTML요소, 컴포넌트 등 다양한 모든 콘텐츠가 될 수 있습니다. Click me ! Fallback Content 상위 컴포넌트에서 슬롯..

Non-Prop 속성 (fallthrough 속성) Non-Prop 속성은 props 또는 event에 명시적으로 선언되지 않은 속성 또는 이벤트 입니다. 예를 들어 class, style, id와 같은 것들이 있습니다. 속성 상속 컴포넌트가 단일 루트 요소로 구성되어 있으면 fallthrough 속성은 루트 요소의 속성에 자동으로 추가됩니다. 예를들어 이라는 컴포넌트가 있다고 가정해보겠습니다. 그리고 이 컴포넌트를 사용하는 부모 컴포넌트는 다음과 같습니다. 최종 렌더링된 DOM은 다음과 같습니다. 최종 렌더링은 자식 컴포넌트의 루트 엘리먼트에 이렇게 상속됩니다. 루트 엘리먼트란? 컴포넌트의 template 태그 속에서 제일 상위 요소입니다. 예: template 바로 밑에 있는 div가 루트 엘리먼트 ..

Events 자식 컴포넌트에서도 부모 컴포넌트로 데이터를 전달 또는 트리거의 목적으로 이벤트를 내보내는것을 말합니다. 그리고 이벤트는 컴포넌트의 emit 메서드를 통하여 발생시킬수 있습니다. 이벤트 발생 및 수신 컴포넌트의 블록 안에서 내장 함수 $emit()을 사용하여 직접 커스텀한 이벤트를 내보낼 수 있습니다. 그러면 부모 컴포넌트에서 v-on(또는 @)을 사용하여 이벤트를 수신할 수 있습니다. .once 수식어는 컴포넌트 커스텀 이벤트에서도 지원됩니다 이벤트 파라미터 이벤트와 함께 특정 값을 내보낼 수 있습니다. $emit 함수 이벤트명에 추가로 파라미터를 넘길 수 있습니다. 그런다음 부모 컴포넌트에서 이벤트와 함께 파라미터를 받을 수 있습니다. 이벤트 선언하기 Vue2와 다르게 Vue3에는 emi..

Props UI나 레이아웃은 동일하지만 게시글의 제목, 내용 같은 데이터는 각각 다릅니다. 그럼 컴포넌트에 각각 제목, 내용 데이터를 전달해야 하는데 이때 Props를 사용하여 컴포넌트로 데이터(속성)을 전달할 수 잇습니다. Props란? Props란? 컴포넌트에 등록할 수 있는 사용자 정의 속성 입니다. 블로그 게시글 컴포넌트에 사용자 정의 속성을 선언하면 이 컴포넌트를 사용하는 부모 컴포넌트에서 데이터 (속성)를 전달할 수 있습니다. Props 선언 Vue 컴포넌트에는 명시적 Props 선언이 필요합니다. 왜냐하면 컴포넌트에 전달된 외부 props가 fallthough 속성으로 처리되어야 함을 알 수 있습니다. 문자열 배열 선언 컴포넌트에 props 옵션을 사용하여 선언할 수 있습니다. 객체문법 선언..

Vue에서 Single-File Component(SFC, *.vue)는 Vue 컴포넌트의 템플릿(template), 로직(script), 스타일(style)을 하나의 파일로 캡슐화 하는 특수 파일 형식 입니다. 확장자는 *.vue이며 다음은 SFC의 예 입니다. 위 예시처럼 Vue SFC는 HTML, CSS, JavaScript의 문법을 유지하면서 확장한 특수 파일 입니다. 언어 블록 각 *.vue 파일은 한번에 최대 하나의 top-level 블록을 포함할 수 있습니다. 콘텐츠는 추출되어 @vue/compiler-dom으로 전달되고, javaScript 렌더 기능으로 사전 컴파일되고, render 옵션으로 내보내어 컴포넌트에 첨부됩니다. 각 *.vue 파일은 한 번에 최대 하나의 블록을 포함할 수 있습..