맨동이

컴포지션 API - props, context 1. 전달인자 setup 펑션은 2가지 전달인자를 가집니다 props context 1.1 Props setup 펑션의 첫번째 전달인자는 props입니다. 표준 컴포넌트에서 예상하는 것처럼 setup 내부의 props는 반응성이 있고, 새로운 props가 전달되면 업데이트됩니다. 1.2 Context setup펑션의 두번째 전달인자는 context입니다. context는 3가지 컴포넌트 프로퍼티를 가지는 일반 JavaScript 객체입니다. 2. 컴포넌트 속성에 접근하기 setup이 실행될 때, 컴포넌트 인스턴스는 아직 생성되지 않았습니다. 결과적으로 아래와 같은 속성에만 접근할 수 있습니다. props attrs slots emit 즉, 다음 컴포넌트 옵션..

1. 컴포지션 API의 필요성 //App.vue {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} message와 관련된 코드, 그리고 count와 관련된 코드가 나뉘어 작성을 하게 되며 코드가 동작하는 로직을 이해하기 위해서 관련 코드의 옵션 블록을 지속적으로 점프해야합니다. 코드를 이해하기 위해 관련 옵션들을 위, 아래로 이동(스크롤)하여 코드를 보는 행동을 점프라고 표현합니다. 논리적인 관점 단위로 개발을 하려고 해도 이 옵션의 규칙을 지켜야하고 더 많은 논리 주제가 추가될 수록 코드의 양이 많아져 가독성이 떨어지고 유지보수성이 낮아집니다. 그렇다면 동일한 논리적 관심사와 관련있는 코드를 함께 배치할 수 있다면 더 좋을 것입..

컴포넌트 - Refs 1.1 개념 비록 props와 이벤트가 존재하지만, 가끔은 자식 요소에 JavaScript를 이용해 직접 접근해야 하는 경우가 있습니다. 이 경우, ref 속성을 이용해 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여함으로써 직접 접근할 수 있습니다. mounted() { const h1El = document.querySelector('#hello') console.log(h1El.textContent) } 원래의 경우라면 위처럼 DOM API를 사용하게 됩니다. 하지만 참조하겠다는 의미의 ref 라는 속성을 사용하면 해당 기능을 간단하게 사용할 수 있습니다. 1.2 Refs 사용 예시 //App.vue Hello world! export default { mounted() ..

1. Provide & Inject 1.1 개념 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야할 때 props를 사용합니다. 특정한 두 컴포넌트 사이에 깊이 중첩된 컴포넌트가 있는 구조의 경우 하위 컴포넌트에서 상위 컴포넌트의 무언가가 필요한 경우를 상상해보십시오. 이 경우에 두 컴포넌트 사이의 모든 컴포넌트에 prop를 전달해야하므로 굉장히 번거로울 것입니다. 이러한 경우 provide와 inject 쌍을 사용할 수 있습니다. 부모 컴포넌트는 컴포넌트 계층 구조의 깊이와 상관없이 모든 자식에 대한 종속성 제공자 역할을 할 수 있습니다. 이 기능은 2개의 부분으로 구성됩니다: 부모 컴포넌트는 데이터 제공을 위해 provide 옵션을 사용하며, 자식 요소는 데이터 사용을 위해 inject 옵션을 사..

컴포넌트 - Slot 1. Slot 1.1 Fallback Contents //App.vue(부모 컴포넌트) Cherry export default { components: { MyBtn } } //MyBtn.vue(자식 컴포넌트) slot의 태그로 부모 컴포넌트에서 받을 데이터의 자리를 표시하면 Cherry라는 텍스트를 화면에 출력할 수 있었습니다. 하지만 여기서 slot 태그 내에 내용을 입력할 수 있습니다. //App.vue(부모 컴포넌트) //MyBtn.vue(자식 컴포넌트) Apple slot 태그 내에 텍스트를 입력하면, 그 내용이 출력됩니다. 하지만 부모 컴포넌트에 내용이 없을 경우에만 출력되며, 부모 컴포넌트에 텍스트가 있다면 해당 내용이 출력됩니다. 이렇게 slot 태그 내에 입력한 컨텐..

컴포넌트 - Emit 1. 이벤트 상속 //App.vue(부모 컴포넌트) Banana export default { components: { MyBtn }, methods: { log() { console.log('Click!!') } } } //MyBtn.vue(자식 컴포넌트) export default { inheritAttrs: false } MyBtn 태그에 클릭 이벤트 발생시에 실행할 method를 연결하였습니다. 그러나 @click이라는 속성으로 연결을 하였기 때문에 자식 컴포넌트에 inheritAttrs: false 값으로 인해 클릭을 하여도 method가 실행되지 않습니다. 자식 컴포넌트에 최상위 요소가 2개 이상이고 inheritAttrs 옵션을 사용해야하는 경우라면 이벤트를 적용할 수 ..

컴포넌트 - 속성 상속 1. 속성 상속 1.1 클래스 상속 //App.vue(부모 컴포넌트) Banana //MyBtn.vue(자식 컴포넌트) // 최상위 요소(Root Element) 부모 컴포넌트의 html 요소에 class 속성으로 값을 입력한 경우, 자식 컴포넌트의 btn이라는 클래스에 상속이 됩니다. 이러한 개념을 속성 상속이라고 합니다. //MyBtn.vue(자식 컴포넌트) // 최상위 요소(Root Element) // 최상위 요소(Root Element) 하지만 자식 컴포넌트에 template 태그 안에 있는 최상위 요소가 2개 이상일 경우에는 부모 컴포넌트에 입력한 속성 값이 어느 부분에 상속이 되어야하는지 판단할 수 없기 때문에 두 요소 모두 상속이 되지 않습니다. 1.2 스타일 상속 ..

컴포넌트 기초 1. 컴포넌트 기본 구성 1.1 App.vue // 컴포넌트 렌더링 1.2 MyBtn.vue Apple 2. 컴포넌트의 특징 2.1 재활용 컴포넌트의 장점이라고 한다면, 컴포넌트는 얼마든지 반복해서 재사용할 수 있다는 것입니다. App.vue 파일에 위와 같이 작성한다면 버튼을 재활용하여 여러 개를 화면에 출력할 수 있기 때문입니다. 2.2 Props 또한, 재활용을 하면서 props라는 개념을 이용하여 App.vue라는 부모 컴포넌트에서 MyBtn.vue라는 자식 컴포넌트로 데이터를 전달할 수 있습니다. 이러한 이유로 props를 통해 구현한 이 기능을 부모 컴포넌트와 자식 컴포넌트 간의 데이터 통신 방법이라고도 이야기합니다. //App.vue //MyBtn.vue // 데이터 바인딩 A..

폼 입력 바인딩 폼 입력 바인딩은 v-model 이라는 디렉티브를 사용하여 양방향 데이터 바인딩을 생성합니다. 1. 단방향 데이터 바인딩 {{ msg }} export default { data() { return { msg: 'Hello world!' } } } 위와 같이 데이터를 스크립트 태그로 연결하여 Vue에서 활용할 수 있었습니다. 이렇게 데이터를 출력하는 방법을 단방향 데이터 바인딩이라고 합니다. 데이터에서 html 쪽으로 한 방향으로만 흐르기 때문에 단방향 데이터 바인딩이라 부릅니다. 단방향 데이터 바인딩으로 인하여 input 요소를 수정한다하더라도 수정된 내용이 msg 데이터를 갱신하지 않습니다. 2. 양방향 데이터 바인딩 {{ msg }} 이처럼 input 요소에 이벤트를 청취하도록 합니..

이벤트 수식어 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일입니다. 메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있으면 더 좋습니다. 이 문제를 해결하기 위하여, Vue는 v-on이벤트에 이벤트 수식어를 제공합니다. 수식어는 점으로 된 접미사 입니다. .stop .prevent .capture .self .once .passive ... ... 관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시 말하여 v-on:click.prevent.self를 사용하면 모든 클릭을 막을 수 있으며 v-on:c..