Vue.js - 새로 알게 된 내용들 정리

Vue.js를 요즘 공부하고 있고

기존에 해봤던 것을 다시 한번 하는 것이기 때문에 아직까지는 어려움이 없다.

그래도 이번에 정식으로 Vue.js를 공부하면서

새롭게 알게 된 내용들 or 중요하다고 생각하는 내용을 기록하려 한다.

 

이 글은 Vue.js에 대한 기본지식이 있어야 이해할 수 있을 것이다.
(자세하게 적을 생각이 없다.. ㅎㅎ)

 

1. v-for

v-for은 Vue에서 제공하는 반복문이다.

<div v-for="data in dataList" :key="data">
	<!-- 반복할 내용들 -->
</div>

<div v-for="(data, idx) in dataList" :key="idx">
	<!-- 반복할 내용들 -->
</div>

코드에서처럼 v-for를 사용해서 진행하고, :key="??"를 추가한다.

:key="??"는 반복문을 돌면서 반복 요소들을 구분하는 속성이다.

data가 될 수도 있고, (data, idx)의 경우에는 idx가 key역할을 할 것이다.

 

2. export , import

export로 보내고 싶은 데이터를 설정해야

import로 받고 싶은 데이터를 받을 수 있다.

 

// example.js
var test = 10;
export default test;

// App.vue
import data from './example.js경로';

import로 받을 때 data라는 단어 말고 본인이 원하는 문자로 작명할 수 있다.

 

// example.js
var test1 = 100;
var test2 = 200;
export { test1, test2 };

// App.vue
import { test1, test2 } from './example.js경로'

export를 원하는 데이터만큼 사용할 수 있다.

이 때, import 시에는 작명할 수 없고 export한 변수명 그대로 써야한다.

 

// example.js
export default [
	// List 형식의 데이터
];

// App.vue
import data from './example.js경로'

data() {
	return {
    	dataList : data
    }
}

export를 바로 해버릴 수도 있다.

import 시 작명은 원하는 대로 하면 되고,

만약 이 데이터를 사용하고 싶을 때는 data() {} 이 부분에다가 쓰면 된다.

 

3. 컴포넌트

Vue에서는 컴포넌트를 만들어서 반복되는 구문을 사용할 수 있다.

// App.vue
<Example></Example>

...

import Example from './Example.vue 경로';

// Example.vue

...

<script>

...

name : "ExampleComponent",

...

</script>

이 때 컴포넌트의 이름을 설정해야 하는데 영어 2개 이상을 사용해서 진행해야 한다.

아니면 에러를 뱉어낸다. → 이 부분은 Vue.js를 쓰면서 단점이다.

혹은 package.json 파일에 다음을 추가한다.

"rules": {
   "vue/multi-word-component-names": "off"
}

 

4. props

Vue에서는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전송할 수 있는데

props라는 문법을 사용하면 된다.

4-1. 보내기

// App.vue
<Example :sendData="sendData"></Example>

:작명="데이터 이름" 이라는 형식으로 작성하면 된다.

작명 부분에는 본인이 원하는 이름, 데이터 이름 부분에는 기존 변수 이름을 적는다.
(둘 다 통일되게 적는 경우가 많음)

4-2. 받기

// Example.vue
<script>
	export default {
    	name : 'ExampleComponent',
        props : {
        	sendData : Object,
        }
    }
</script>

해당 컴포넌트에서 데이터를 받는다. → props 라는 부분에 적는다.

{ 데이터이름 : 자료형 } 형식으로 적는다.

자료형에는 Number, String, Object, Array 등이 있다.

4-3. 사용

데이터를 받아서 props 부분에 적었다면 그 다음에는 Vue 문법에 맞게 작성하면 된다.

 

단, 자식 컴포넌트에서는 부모 컴포넌트에서 받은 데이터를 수정할 수 없다.

즉, props를 받은 데이터들은 수정이 불가능 & 읽기만 가능하다.

 

5. $emit

props로 받은 데이터를 수정해야 하는 경우가 있다.

그럴 때 쓰는 것이 바로 $emit이다.

// Example.vue
<template>
	
    ...
    
    <div @click="$emit('requestData')">{{ sendData.num }}</div>
    
    ...
    
</template>

자식 컴포넌트에서 $emit('??')를 사용한다.

?? 부분에는 작명을 하면 된다.

// App.vue
<Example @requestData="변경할 데이터 적용"></Example>

@??="내용" 형식으로 적는다.

?? 에는 자식컴포넌트에서 작명한 것을 적는다.

내용에는 본인이 변경하려는 데이터를 변경하는 내용을 적으면 된다.

 

6. watch

뭔가 데이터 변경이 있을 때 그것을 감지해야 한다면 watch를 사용하면 된다.

<script>
	export default {
    	data() {
        	return {
            	month : 1,
            }
        },
        watch : {
        	month() {
            	// month가 변경될 때 실행할 코드
            }
        },
    }
</script>

watch 안에 함수를 넣으면 되는데, 함수명은 데이터명으로 작성하면 된다.

ex) year라는 변수가 있을 경우 : year() {  } 로 작성하면 됨.

 

7. transition 태그

Vue에서 애니메이션을 적용할 때 transition 태그를 사용하면 좀 더 편리하게 애니메이션 개발이 가능하다.

<transition name="작명"></transition>

...

.작명-enter-from		// 애니메이션 동작 전
.작명-enter-active	// 애니메이션 동작 중
.작명-enter-to		// 애니메이션 동작 후

작명을 한 뒤, 3개의 css 스타일을 주면 바로 적용이 완료된다.

 

8. [...{리스트 형식의 데이터}]

뷰에서 기존의 데이터 형식을 알아야 할 경우가 있을 수 있다.

• 예) 정렬 후 다시 원 상태로 복구해야할 때

백엔드도 잘 갖춰진 상황이라면, 그냥 서버에 요청을 해서 가져올 수도 있지만,

연습용으로 만들어서 서버를 갖추지 못한 상황이라면?

그 때는 [...리스트] 형식을 쓰면 된다고 한다.

data() {
    return {
        list : dataList,
        listBackUp = [...dataList],
    }
},
methods : {
    initFunc() {
        this.list = [...this.listBackUp];
    },
},

[...Array자료형] 은 기존 데이터의 복사본을 하나 만드는 것이라고 생각하면 된다고 한다.

그래서 되돌리기를 하려고 할 때, 저 방식을 사용하면 원래 데이터들을 그대로 받아올 수 있다고 한다.

이건 알아두면 유용하게 잘 쓸 수 있을 것 같다.

 

9. Vue.js 의 라이프사이클

사실 뷰를 공부하면 라이프사이클에 대해서 한번씩은 들어볼 것이다.

이론적인 면에서는 가장 중요하다고 생각되는 부분이기도 하다.

1. create
2. mount
3. update
4. unmount

크게 4단계로 구분되고, 세세하게 구분하면 before가 각 단계마다 붙어서 8단계로 볼 수 있다.
(예전에는 unmount가 destroy였던 것 같기도 한데,, 내가 잘못 알고 있었나...)

 

이런 라이프 사이클에 대해서 알고 있어야 하는 이유는

LifeCycle Hook 을 잘 쓰기 위해서라고 한다. (굉장히 실용적인 이유면에서.. ㅎㅎ)

• create - 데이터 생성
• mount - 렌더링
• update - 데이터가 바뀌어서 재렌더링
• 이런 방식으로 생각하면 된다.

 

 

 

이렇게 내가 지금까지 들은 수업에서 중요하다고 생각하는 부분이나 새롭게 알게된 부분에 대해서 적었다.

사실 7,8번 빼고는 기존에 알고 있었는데 까먹었다가 이번 강의를 통해서 다시 기억난 것 같다.

 

지금 들으면서도 내가 뷰를 배워서 어디서 써먹을까 하는 생각이 있기는 한데,

어차피 결제했으니 빠르게 학습하자.

 

 

나중에 더 알게되는 사실이 있다면 그 때 또 적어볼 것이다.

 

 

 

출처 : 코딩애플 - 인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드