이번 포스트에서는 자식 컴포넌트에 v-model을 적용하는 방법에 대해 알아보자. v-model의 동작 native element에서의 v-model native element 즉 html의 input 요소에 v-model을 적용하면 손쉽게 양방향의 바인딩이 구현된다. 그럼 사용자 정의 컴포넌트에서 처리하려면 어떤 과정이 필요할까? 사실 v-model은 내부적으로 value 속성에 값을 할당하는 v-bind와 input 이벤트 시 값을 입력하는 v-on 두 개의 directive가 합쳐서 동작하는 것이다. 예를 들어 input 요소에 age를 연결하는 과정은 아래 두 가지 과정으로 나눠볼 수 있다. vmodel : 사실은.. component에서의 v-model 그럼 위 개념이 그대로 component에..

이번 포스트에서는 동적 컴포넌트(dynamic component)에 대해 살펴보자. 동적 컴포넌트 동적 컴포넌트 구성 dynamic component는 동적으로 component를 교체해야 하는 경우 사용된다. 대표적인 예로 탭으로 구성된 UI등을 생각해볼 수 있다. dynamic component를 사용하기 위해서는 태그의 is라는 속성에 표시할 component를 할당해주면 된다. is 속성에는 등록된 컴포넌트의 이름 문자열이나 실제 컴포넌트 객체를 등록할 수 있다. 컴포넌트를 등록할 때 주의 사항은 컴포넌트 변수 선언 시 ref 가 아닌 shallowRef를 사용해야 한다는 점이다. 만약에 ref를 사용하면 성능상 overhead가 발생한다는 경고가 console에 출력된다. shallowRef는 ..

이전 포스트에서 부모 컴포넌트에서 자식 컴포넌트로 값(데이터)을 전달하기 위해서  props를 사용하는 것에 대해서 살펴보았다. 이번에는 props와 유사하지만 값이 아닌 html markup을 전달하려는 경우에 필요한 slot이라는 것에 대해서 살펴보자.  slot의 필요성props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 전달할 수 있는 것은 JavaScript의 타입(String, Number, Object, ...)의 데이터 들이다. 전달받은 데이터를 어떻게 사용할지(computed로 하건, local 변수에 할당하건, 스타일을 어떻게 적용하건)는 오롯이 자식 컴포넌트의 몫이다.그런데 만약 html markup이 전달된다면 어떨까? 문자를 파싱해서 어떤 태그인지 확인해야 하고 태그 중간에 데이터..

이번 포스트에서는 provide와 inject의 개념과 사용법에 대해 알아보자.  prop drilling의 문제와 해결 prop drilling아주 긴 상/하 관계의 컴포넌트 트리가 있다고 생각해 보자. 이 상황에서 root 컴포넌트에서 생성된 어떤 값을 말단의 컴포넌트에게 전달할 수 있을까? 당연히 된다. 우리가 배운 props를 한 땀 한 땀 이용하다 보면 언젠가 말단의 컴포넌트에 도착할 것이다. 하지만 매우 지루한 작업이 될 텐데 이런 것을 prop drilling이라고 한다.  provide와 injectprop drilling 문제를 해결하기 위해서 vue에서는 provide와 inject를 사용할 수 있다.provide: 데이터를 제공할 상위 컴포넌트에서 자료를 공급하는 것inject: 데..

이번 포스트에서는 자식 컴포넌트가 부모 컴포넌트에게 이벤트를 통해 정보를 전달하는 과정을 살펴보자. 자식 컴포넌트의 값을 상위 컴포넌트로 전달할 때 emit을 통한 이벤트 발생과 처리 부모 컴포넌트가 자식에게 데이터를 전달할 때는 props를 사용하고 반대로 자식 컴포넌트가 부모 컴포넌트에게 값을 전달하고자 할 때에는 사용자 정의 이벤트를 이용한다. 여기서 주의할 점은 통상 이벤트라고 하면 처리만을 생각하는데 컴포넌트의 통신에는 이벤트의 발생과 처리 두 가지가 모두 필요하다. 먼저 자식 컴포넌트는 전달할 데이터를 파라미터로 사용자 정의 이벤트를 발생시킨다. 이것을 emit이라고 한다. 다음으로 부모는 이 이벤트를 처리해야 하는데 이제까지 처럼 v-on이 사용된다. 자식 컴포넌트에서 emit을 통한 사용자..

이번 포스트에서는 props 사용 시 주의 사항에 대해 알아보자. props validation props로 다양한 타입의 데이터 전달 가능 props에는 문자열 뿐 아니라 모든 속성이 파라미터로 전달될 수 있다. 다음과 같은 Component를 생각해 보자. {{ name }} 나이: {{ age }}, 20년 후에는 {{ 20+age }} 살 전화: 번호는 {{ phone.number }}, 기종은 {{ phone.os }} 이 컴포넌트를 작성할 때 name은 문자열, age는 숫자, phone은 number와 os를 속성으로 갖는 객체를 고려했다. 따라서 아래의 입력과 출력이 원하는 상태이다. const user1 = { name: 'hong', age: 20, phone: { number: '12..

이번 포스트에서는 화면을 구성하는 여러 컴포넌트 간의 통신에 대해 살펴보자. 컴포넌트간 통신과 유효 범위 각각의 컴포넌트는 개별적으로 고유한 유효범위를 가지기 때문에 다른 컴포넌트의 데이터를 직접 참조할 수는 없다. 그럼 서로 다른 컴포넌트들이 데이터를 주고받으려면 어떻게 해야 할까? 이것은 컴포넌트들의 관계가 상/하위 관계인지 아닌지에 따라 달라진다. 상/하위 관계가 있는 경우 부모/자식의 형태를 띄는 상/하위 컴포넌트의 관계에서는 방향에 따라 두 가지를 사용한다. 상위 -> 하위 즉 부모가 자식에게 데이터를 전달할 때에는 사용자 정의 속성(props)을 통해서 값을 전달한다. 하위 -> 상위 즉 자식이 부모에게 데이터를 전달할 때에는 이벤트를 발생(emit) 시켜서 데이터를 전달한다. 상/하위 관계가..

이번 포스트에서는 SFC 기반에서 component의 정의와 사용에 대해 알아보자. 앞으로는 Vite 기반으로만 작성할 예정이기 때문에 이전 포스트에 대한 선행 학습이 반드시 필요하다. https://goodteacher.tistory.com/545 [vue 3] 01.SPA & SFC & Vite 이번 포스트에서는 SPA와 SFC 그리고 이를 구현하기 위한 Vite에 대해서 살펴보자. SPA vs MPA 정의 SPA(Single Page Application)과 MPA(Multi Page Application)이라는 용어에 대해서 살펴보자. 말 그대로 애플리케이 goodteacher.tistory.com 컴퍼넌트 정의 Vite와 같은 빌드툴을 사용할 때 SFC(Single File Component) ..