Posis

이번 포스트는 Provide/inject를 활용한 컴포넌트 데이터 전달에 대해서 다뤄보겠습니다. props와 provide/inject 컴포넌트 간에 데이터 전달에는 props와 provide/inject 두 가지가 존재합니다. props: 컴포넌트 태그마다 작성을 해서 데이터를 보내서 자식 컴포넌트 안에서 script안에 props를 정의해 주어야 합니다. 단, 컴포넌트를 여러 번 거친다고 할 때 모든 컴포넌트마다 작성을 해 주어야 합니다. provide/inject: provide와 inject는 컴포넌트 태그에 작성하지 않습니다. script안에 작성하며 props와 다른 점은 컴포넌트가 여러 번 거쳐도 최상위 컴포넌트와 최하위 컴포넌트 단 두 곳에서만 작성하면 데이터 전달이 이루어집니다. prop..

이번 포스트에서는 컴포넌트 재 사용성을 늘리기 위한 slot을 활용하는 방법에 대해서 다뤄보겠습니다. slot은 언제 사용할까? slot은 컴포넌트를 재사용성을 높이고 싶을 때 사용한다. 즉, 재사용을 한다는 말은 다른 컴포넌트들 보다 디테일하기 때문이다. 디테일하기 때문에 재사용성을 높일 수 있는 것이다. 예를 들어 1번 컴포넌트는 다양한 곳에 사용된다고 한다. 하지만 매번 다른 문구들을 출력해야 할 때 이번장에서 다루는 slot태그를 활용하면 쉽게 재사용할 수 있는 컴포넌트를 만드는 것이다. Basic 프로젝트이름/src/components/Slot.vue 프로젝트이름/src/App.vue Vue.js 기본적으로 부모 컴포넌트를 열린 태그와 닫힌태그를 같이 사용할 때 그 안에 문구를 넣어주면 그 값이..

이번 포스트에서는 emit Event를 활용해서 자식 컴포넌트에서 부모 컴포넌트로 데이터 통신하는 방법에 대해서 다뤄보겠습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 props 간단 정리 부모 컴포넌트에서는 props를 활용하여 자식 컴포넌트로 데이터를 보낼 수 있다. 즉, 단방향 데이터 바인딩 방식이다. 자식 컴포넌트에서 emit Event를 활용하여 부모 컴포넌트로 데이터 보내기 프로젝트이름/src/App.vue 프로젝트이름/src/components/Input.vue Input 컴포넌트에 abc를 작성하면 watch 속성이 msg의 데이터 변경을 감지하고 한글자씩 a -> ab -> abc를 콘솔에 출력하는 것을 볼 수 있습니다. 동작 순서 input의 입력한 데이터를 변경을 감지해줄 ..

이번 포스트에서는 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하여 사용하는 방법에 대해서 다뤄보겠습니다. 프로젝트이름/src/components/Btn.vue {{ text }} 프로젝트이름/src/App.vue 위 예제 코드는 버튼 컴포넌트를 만들어 재사용하는 코드입니다. 간단하게 코드를 설명하겠습니다. App.vue 자식 컴포넌트에 보내는 props는 총 3개 color, large, text입니다. color는 내가 어떠한 색을 입힐지 작성해줍니다. 16진수도 가능합니다. CSS에서 색을 표현할 수 있는 수단은 모두 가능합니다. HSL, HSV 등등 large는 Boolean 타입의 props입니다. 컴포넌트 태그에 large만 작성하면 true로 인식합니다. 만익 large props를 작..

이번 포스트에서는 컴포넌트(component)를 만들고 어떻게 사용하는지에 대해서 다뤄보겠습니다. 컴포넌트(component) 만들기 프로젝트이름/src/components/Btn.vue {{ text }} 프로젝트이름/src/App.vue App.vue와 같은 위치에 components 폴더를 만들고 원하는 컴포넌트 파일을 만듭니다. - Btn.vue 저는 박스 안에 text(props)를 받아서 글자를 출력하기 위해서 script에서 props - text를 등록해줍니다. type은 String, text(props)를 넘겨주지 않았을 경우 기본값(default)으로 JavaScript를 등록해줍니다. App.vue 파일로 돌아와 script에 컴포넌트 파일을 import 하고 components에 ..

이번 포스트에서는 컴포넌트에 대해서 다뤄보겠습니다. 컴포넌트(component) 개념 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다. Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다. 위 그림은 왼쪽은 화면 오른쪽은 컴포넌트를 분할해 나눠둔 것이다. 컴포넌트를 그림으로 설명하자면 오른쪽에 블록 한 개가 하..