Front-End/Vue.js7 [Vue] - Components Communication(props, emit) Components Communication(props, emit) 1. Component란? 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능으로 Component를 사용하면 UI를 독립적이고 재사용이 가능하도록 분할하여 각 부분을 개별적으로 다룰 수 있게 됩니다. 때문에 Component 기반으로 화면을 개발하게 되면 코드의 재사용성이 증가하게 됩니다. 1-1. Component 사용 부모 Component에서 자식 Component를 사용할 수 있습니다. 자식 Component를 template에 노출하기 위해서는 components 옵션을 사용하여 컴포넌트를 등록한 후 등록된 키를 사용하여 태그로 사용할 수 있습니다. // 자식 컴포넌트 export default { data() { return .. 2023. 2. 12. [Vue] - 템플릿 참조 템플릿 참조 template에서 개발자가 특정 DOM 엘리먼트에 직접 접근해야 하는 경우나 컴포넌트의 정보를 접근하기 위해 사용하는 ref속성입니다. ref 는 v-for 의 key 속성과 유사한 특수 속성이며 이를 통해 마운트 된 특정 DOM 엘리먼트 또는 자식 컴포넌트 인스턴스에 직접적인 참조를 얻을 수 있습니다. 1. ref로 접근하기 ref 속성을 사용하면 this.refs 로 접근할 수 있습니다. 주의할 점은 첫 랜더링이 끝날 때까지 엘리먼트가 존재하지 않기 때문에 컴포넌트가 마운트 된 이후에만 ref에 접근할 수 있습니다. 컴포넌트가 랜더링이 된 이후 적용 되기 때문에 반응형으로 구성하기 위한 computed 나 watch 에서 사용하면 안 됩니다. export default { mounted.. 2023. 2. 12. [Vue] - 감시자(watcher) 감시자(watcher) 이미 정해져 있는 속성들은 template에서 사용할 수 있습니다. 그러나 속성 값이 변하게 되면 랜더링을 수행하여 화면을 나타내야 하는데 이때 watch 옵션을 사용하여 반응형 속성이 변경될 때마다 함수를 실행할 수 있습니다. export default { data() { return { question: '', answer: '질문에는 일반적으로 물음표가 포함됩니다.' } }, watch: { // question이 변경될 때마다 이 함수가 실행됩니다 question(newQuestion, oldQuestion) { if (newQuestion.includes('?')) { this.getAnswer() } } }, methods: { async getAnswer() { thi.. 2023. 2. 12. [Vue] - 컴포넌트 생명주기(created, mounted, updated) 컴포넌트 생명주기 각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경이 되면 DOM을 업데이트해야 하는데 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수를 실행하여 개발자가 의도하는 로직이 실행될 수 있도록 도와줍니다. 1. beforCreate Vue 컴포넌트 인스턴스가 생성되어 초기화된 후 가장 처음으로 실행되는 라이프 사이클 단계입니다. 이때, 뷰 인스턴스의 data와 methods 속성이 정의되어 있지 않기 때문에 접근할 수 없다는 점을 주의해야 합니다. 2. created Vue 컴포넌트 인스턴스가 모든 상태 관련 옵션 처리를 완료한 후 호출됩니다. data 속성과 methods 속성이 정의되.. 2023. 2. 12. Vue - Form 입력 바인딩 Form 입력 바인딩 일반적으로 Form을 처리할 때, Form에서 사용되는 element들은 값을 수동으로 바인딩하고 이벤트 리스너를 변경해야 하는 번거로움이 있는데 v-model 디렉티브를 이용하면 편리하게 사용할 수 있다. v-model은 서로 다른 유형의 엘리먼트에 따라 자동으로 속성과 이벤트를 사용한다. 엘리먼트 속성 이벤트 value input checked change value change 1. 기본 사용법 1-1. 텍스트 value 속성, input 이벤트 메세지: {{ message }} 여러 줄 메세지: {{ message }} {{ text }} 1-2. CheckBox checkd 속성, change 이벤트 {{ checked }} 배열 또는 Set에 여러 개의 체크박스 값을 바인.. 2023. 2. 3. Vue - 조건부, 리스트 렌더링과 이벤트 핸들링 조건부, 리스트 렌더링과 이벤트 핸들링 조건부 렌더링 리스트 렌더링 이벤트 핸들링 1. 조건부 렌더링 1-1. v-if , v-else 조건부로 블록을 렌더링할 때 사용 true 일 경우 렌더링 v-else 디렉티브는 v-if or v-else-if 엘리먼트 바로 다음에 와야 한다. isValue 값이 true일 경우 isValue 값이 false일 경우 1-2. v-show 초기 조건과 관계없이 항상 렌더링되는 조건부 렌더링 display CSS 속성이 전환 isValue가 true이면 표시, false이면 미표시 1.3. v-if vs v-show v-if v-show 조건이 true가 될 때까지 렌더링 되지 않는다. 전환 비용이 높다.(조건이 달라질 때마다 렌더링되기 때문) 조건과 상관없이 항상 렌.. 2023. 1. 29. Vue - 템플릿 문법 텍스트 보간법 (Mustache - 이중 중괄호) 속성 바인딩 JavaScript 표현식 디렉티브 템플릿 문법 Vue는 컴포넌트 인스턴스의 데이터를 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용한다. 내부적으로 템플릿을 최적화된 JavaScript 코드로 컴파일하기 때문에 변경 사항을 적용할 때, 다시 렌더링할 필요가 있는 최소한의 컴포넌트를 파악하고 DOM 조작을 최소화 시켜준다. 1. 텍스트 보간법 (Mustache - 이중 중괄호) 데이터 바인딩의 가장 기본적인 형태는 이중 중괄호 문법을 사용한 텍스트 보간법 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석하므로 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다. 메세지 : {{ msg }} 텍스트 보간법 사용: {.. 2023. 1. 24. 이전 1 다음
