[Vue 공식 문서 뽀시기-1] Vue 맛보기

프로그래머스 데브코스 - Vue

이번 주 부터는 Vue에 대해서 공부를 시작해보겠습니다.🎉

시작하기 | Vue.js

 

시작하기

Vue.js는 무엇인가?

Vue는 UI를 만들기 위한 progressive 프레임워크입니다.

 

🙌🏻 잠깐! Progressive Framework란? 밑에 페이지를 참조해주세요.😊

Progressive Web App(PWA)이란?

 

선언전 렌더링(Declarative Rendering)

간단한 템플릿 구문({{ }})을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수 있는 시스템이 있습니다.

🌹 {{ }}를 '이중 중괄호 구문'이라고 합니다.

Ex.

<div id="counter">
	Counter: {{ counter }}
</div>

const Counter = {
	data() {
    	return {
        	counter: 0
        }
    }
}
Vue.createApp(Counter).mount('#counter')

 

-> 데이터(State)와 DOM이 연결되었으며 반응형(reactive)이 되었습니다.👍

아래 코드를 작성하고 실행해보면, couter 값이 변경될 때마다 DOM이 re-rendering되는 것을 알 수 있습니다.

🔥 반응형(Reactive)이란? 데이터(State)가 변경되었을 때, 연결되어 있는 DOM 요소가 함께 변경되도록 하는 기술이며, 이 때 사용되는 데이터(State)를 반응형 데이터라고 합니다.

 

const CounterApp = {
	data() {
    	return {
        	counter: 0
        }
    },
    mounted() {
    	setInterval(() => {
        	// counter 값이 변경될 때마다 re-rendering
        	this.counter++
        }, 1000)
    }
}

🔥 주의!! setInterval의 인자로 일반함수가 아닌 화살표 함수를 넘겨야합니다.
일반 함수의 this는 호출될 때 전역 스코프를 가리키지만 화살표 함수의 this는 화살표 함수가 정의된 scope를 가리키기 때문에 일반함수를 사용할 경우, Counter 객체의 data의 counter를 변경하는 것이 아닌 전역 객체의 couter 변수의 값을 증가시키도록 작동하기 때문입니다.

 

위와 같이 {{ }}를 사용하는 것 이외에도 element의 속성 값에 데이터를 바인딩 시켜줄 수도 있습니다.

<div id="app">
	<div v-bind:class="{ orange: active }">{{ counter }}</div>
</div>

.orange {
	color: orange;
}

const App = {
	data() {
    	return {
        	active: true
        }
    }
}
Vue.createApp(App).mount('#app')

위의 코드를 실행하면 글자가 오렌지 색으로 출력되는 것을 볼 수 있습니다. 이와 같이 데이터를 이용하여 속성을 적용할 수 있으며, DOM 요소와 마찬가지로 변경할 수도 있습니다.😊👍

-> 이 때 v-bind 와 같은 속성을 디렉티브라고 합니다.

🌹 일단 Vue 객체의 데이터와 DOM element의 속성을 연결할 때 사용하는 것으로 알고 있자.

 

Vue 객체 내부에 데이터(State)를 선언하고 DOM 요소와 연결하는 방법을 배워보았습니다.

이번에는 메서드의 선언 방벙과 사용법에 대해서 알아보겠습니다.📌

 

사용자 입력 핸들링

Vue 객체의 메서드들은 methods 프로퍼티 내부에 선언되어야 합니다.

위의 counter 예제를 확장해 보겠습니다. 이번에는 1초마다가 아닌 사용자가 + 버튼을 클릭할 때마다 counter의 값을 1씩 증가시키고자 합니다. 어떻게 할 수 있을까요?

 

먼저 counter를 1씩 증가시키는 increase 함수를 Vue 객체 내에 선언하도록 하겠습니다.

const EventHandler = {
	data() {
    	return {
        	counter: 0
        }
    },
    methods {
    	increase() {
            this.counter += 1
        }
    }
}

 

이제 버튼 이벤트를 등록해야 합니다.

Vue에서는 v-on 디렉티브를 사용하여 이벤트 리스너를 추가할 수 있습니다.

<div id="app">
	<span>{{ counter }}</span>
    <button v-on:Click="increase">+</button>
</div>

🔥 이는 개발자가 DOM 조작을 위한 UI 로직보다 비지니스 로직에 초점을 맞춘 개발이 가능하도록 해줍니다.😘

 

v-model 디렉티브

v-model은 v-bind와 달리 양방향 바인딩을 위해 사용됩니다.

 

v-bind는 Vue 객체의 데이터(State)가 변경되었을 때 결과를 받아 DOM에 반영할 때 사용됩니다. 근데 만약 DOM에서 사용자와의 상호작용에 의해서 데이터 변경이 필요할 때는 어떡해야 할까요?

 

예를 들어, 아래 코드처럼 input tag는 사용자로부터 문자를 입력 받고 개발자가 해당 입력 값을 특정 변수에 바로바로 저장하고 자 합니다.

이럴 때 바로!  v-model 디렉티브가 사용될 수 있습니다.

<div id="two-way-binding">
	<p>{{message}}</p>
    <input v-model="message"/>
</div>

const TwoWayBinding = {
	data() {
    	return {
        	message: 'Hello World'
        }
    }
}

위의 코드의 동작 순서는 다음과 같습니다.

1. 사용자가 input에 데이터 입력
2. v-model 디렉티브로 연결되어 있는 message 데이터 변경
3. v-bind 디렉티브로 연결되어 있는 {{message}} 요소 변경

 

조건문과 반복문

1. 조건문 : v-if

element가 표시되는지에 대한 여부를 제어

<!-- Ex -->
<div id="app">
	<span v-if="show">show</span>
</div>

🌹 v-if문 안에 조건이 true일 때만 해당 element를 화면에 표시

 

2. 반복문: v-for

배열에서 데이터를 가져와 아이템 목록을 반복적으로 표시하는데 사용

<!-- Ex -->
<div id="app">
	<ol>
    	<li v-for="todo in todos">
        	{{ todo.text }}
        </li>
    </ol>
</div>

const App = {
	data() {
    	return {
        	todos: [
            	{ text: 'todo 1' },
                { text: 'todo 2' }
            ]
        }
    }
}

 

Component

Component란?

미리 정의된 Vue 인스턴스를 말하며, 다른 Vue 인스턴스의 하위 컴포넌트로 재사용될 수 있는 구성 단위입니다.🧐

Vue에서 컴포넌트를 등록하여 사용하는 방법은 간단합니다. 😆🙌🏻

위의 todo 예제에서 반복되는 리스트들을 component로 만들어 보겠습니다.

먼저 아래와 같이 독립된 새로운 Vue 인스턴스를 만들어 줍니다.

cosnt TodoItem = {
	template: '<li>{{ todo.text }}</li>',
    props: ['todo']
}

 

새로 만든 Vue 인스턴스를 컴포넌트로 등록할 때는 components 프로퍼티(옵션)을 사용할 수 있습니다.

const App = {
	components: { TodoItem },
	data() {
    	return {
        	todos: [
            	{ text: 'todo 1' },
                { text: 'todo 2' }
            ]
        }
    }
}

 

이렇게 등록된 component는 HTML 내부에서 tag로 사용될 수 있습니다.

🌹 주의!! component를 등록할 때는 Pascal Case로 사용했지만 HTML에서 사용할 때는 dash Case로 사용해야 합니다.
왜냐하면.. Vue가 그렇게 정해서 그렇습니다.👍

<!-- Ex -->
<div id="app">
	<ol>
    	<todo-item v-for="todo in todos"/>
    </ol>
</div>

 

위와 같이 코드를 작성하면 에러가 발생할 것입니다.😱

바로 자식 컴포넌트(여기서는 TodoItem)에서 사용하는 todo 객체가 정의된 것이 없기 때문이죠.

부모 컴포넌트는 자식 component에게 v-bind 디렉티브를 이용해 데이터를 전달해 줄 수 있으며,

자식 component에서는 props 옵션으로 해당 데이터를 전달 받습니다.

 

<!-- Ex -->
<div id="app">
	<ol>
    	<todo-item v-for="todo in todos" v-bind:todo='todo'/>
    </ol>
</div>

🔥 이 때, v-bind에 사용되는 속성 값은 자식 component에서 데이터를 전달 받을 prop 이름과 동일해야 함에 유의하자.

 

Vue 프레임워크에 대해서 맛보기를 해보았습니다. 🎉 앞으로는 위에서 설명한 각 기능들의 세부 내용과 다른 고급 기능에 대해 공부해볼 예정입니다📍