Vue의 여러 디렉티브와 다양한 사용방법
v-if 디렉티브는 조건이 만족할 때만 렌더링을 하도록 만드는 어튜리뷰트입니다. v-if와 v-else 디렉티브는 HTML 엘리먼트 중에서 어떤 것을 사용할지 특정 조건을 기준으로 판단할 때 유용하게 사용할 수 있습니다. 조건에 따라서 HTML 엘리먼트를 결정할 수 있습니다. <태그 v-if="변수== true">A</태그> 이와 같은 방식으로 사용하면 됩니다. 반복문을 사용할 때는 v-for 디렉티브를 사용하면 됩니다. v-for 디렉티브는 HTML 안에서 반복문과 함께 사용합니다. v-for 디렉티브는 반복문으로 데이터를 하나씩 차례로 꺼내서 사용할 때 유용합니다. <li v-for="item in 배열이름">{{item.값}}</li> 이런 식으로 사용하면 됩니다. v-on 디렉티브는 뷰에서 발생하는 이벤트에 따라서 DOM 엘리먼트를 제어할 수 있도록 도와주는 어트리뷰트입니다. 뷰 안에서 마우스나 키보드와 관련된 이벤트가 발생했을 때 사용하면 됩니다. 이벤트가 발생했을 때 실행되는 함수를 이벤트 핸들러라고 합니다. <button v-on:이벤트="함수"></button> 이런 식으로 사용하면 됩니다. new Vue의 methods 안에 이벤트가 발생했을 때 실행할 함수를 정의해서 사용합니다. methods 속성은 사용자가 이벤트를 발생시키거나 뷰 안에서 어떤 기능을 하는 모듈 형식의 함수를 만들 때 사용합니다. 뷰를 사용할 때 컴포넌트의 상태값을 관리하고 뷰 간의 이동을 도와주는 Vuex와 라우터도 잘 알아야 합니다. Vuex와 라우터 기능을 활용하면 싱글 페이지 어플리케이션도 간편하게 제작할 수 있습니다. computed 속성은 머스태시를 이용해서 HTML 엘리먼트값이 어떻게 바뀌는지 살펴볼 수 있습니다. computed는 머시태시 않에 넣을 자바스크립트 로직이 복잡할 때 사용합니다. computed 속성은 캐시 메모리에 저장됩니다. computed 속성은 머스태시에 작성할 로직이 복잡해서 함수를 사용해야 할 때, 계산량이 많아서 캐시가 필요할 때 사용합니다. methods 속성은 뷰의 이벤트 핸들러 로직을 함수를 정의할 때 사용합니다. 버튼 클릭과 같은 이벤트와 관련된 코딩을 할 때 methods 속성을 사용해서 코딩합니다. 뷰의 중요한 특징인 컴포넌트는 HTML의 기본 엘리먼트 외에 자신만의 엘리먼트를 만든 것을 말합니다. 리액트의 컴포넌트와 비슷하다고 생각하면 됩니다. 컴포넌트는 여는 태그와 닫는 태그를 사용해서 만들면 됩니다. Vue.component('컴포넌트이름',{속성과 템플릿})으로 작성하면 됩니다. 템플릿은 컴포넌트를 새로운 엘리먼트처럼 사용할 수 있게 합니다. 컴포넌트를 새로운 엘리먼트로 생각한다면 화면에 표시할 부분을 처리해야 하는데 이것이 바로 템플릿입니다. 그리고 컴퍼넌트의 data 속성은 반드시 함수로 정의합니다. 같은 컴포넌트를 여러 개 사용할 때 data 속성의 변숫값들이 메모리에서 관리될 수 있도록 하기 위함입니다. 템플릿에서는 역따옴표를 사용합니다. 역따옴표를 사용해 문자열을 선언하면 줄바꿈이 있어도 HTML 문서로 자동으로 인식합니다. 따라서 HTML 소스를 원본 그대로 입력할 수 있어서 코딩하기 편리합니다. 컴포넌트를 만들 때 computed, methods 속성을 모두 사용할 수 있습니다. 뷰의 컴포넌트를 사용하면 보다 쉽고 간편하게 코딩할 수 있습니다. 목적에 맞게 컴포넌트를 만들어서 사용하면 됩니다. 이때 컴포넌트의 이름을 잘 정해야 합니다. 뷰를 사용할 때 컴포넌트 속성에 대해서 이해해야 합니다. 속성(props)은 컴포넌트에서 전달되는 어트리뷰트의 값을 말합니다. 속성은 문자열이나 객체의 배열 형식으로 되어 있습니다. 컴포넌트를 만들 때 props 속성을 선언합니다. 선언된 이름을 다른 속성에서 전달받아 매개변수처럼 사용할 수 있습니다. 여러 개의 컴포넌트를 사용하면 각 컴포넌트 사이에 상태값을 전달하거나 공유하기가 쉽지 않습니다. 이런 문제를 해결하기 위해서 Vuex를 사용합니다. Vuex는 이용해서 상태값을 저장하고 읽을 수 있습니다. Vuex에는 state,mutations,getters,actions의 속성이 있습니다. state는 공유한 상태값 데이터를 정의합니다. mutations는 외부에서 동기 방식으로 저장할 때 사용합니다. 외부에서 Vuex에 접근할 때 데이터를 대신 바꿔주는 역할을 합니다. getters는 state의 데이터값을 외부에서 읽을 때 사용합니다. mutations와 getters의 역할을 서로 반대입니다. actions는 외부의 API 실행 같은 비동기 실행을 관리할 때 사용합니다. 비동기 실행을 위해서 asyn를 사용하고 매개변수로 commit 객체를 전달합니다. Vuex를 사용하기 위해서 CDN으로 연결하면 됩니다. new Vuex.Store()를 사용해서 코딩하면 됩니다. 여기에서 JSON 형식으로 정의한 속성을 전달하면 됩니다. Vuex 객체의 인스턴스는 const 문을 사용해서 store 변수에 상수로 저장하면 됩니다. state 속성에는 Vuex를 통해서 전역으로 사용되는 데이터를 담습니다.
댓글