Vue는 컴포넌트 단위로 메소드/ 변수 등을 구성한다. 이번에는 컴포넌트 사이에서 어떻게 메소드 / 데이터를 호출하는지 알아보자.
너무 자세하게 설명하는 것이 아닌, 이럴땐 이렇게 하며 좋다라는 개념과 지식을 전달하기 위함이다.
구체적인 내용은 구글링 해보시길. ( 이정표 같은 글을 추구 )
경우의 수는 3가지가 있다.
- 부모/자식 컴포넌트 사이에서 호출하기 위한 설정 -> 부모컴포넌트와 자식컴포넌트 사이에는 특별한 호출방식이 있다.
- 모든 컴포넌트에 적용할 데이터/메소드 설정 -> 전역변수로 생각하면 편하다.
- 전혀 관계없는 컴포넌트 사이에서 호출하기 위한 설정 -> 아무관계도 아니지만, 전역으로 할 필요는 없는 경우
각각의 상황에서 어떤 기능을 써야되는지 알아보자.
1. 부모/자식 컴포넌트 사이에서 호출 - Props & Emit
대부분의 컴포넌트는 부모 / 자식의 관계를 가지고 있다. 여기서 말하는 부모 / 자식 관계는 "부모가 자신의 컴포넌트 안에 자식 컴포넌트를 불러온다"의 개념이다.
Ex) Home.vue와 InputField.vue라는 컴포넌트가 있다. Home.vue 컴포넌트 안에서 <inputField> </inputField> 이렇게 호출하면 Home이 부모 / inputField가 자식 컴포넌트가 된다.
부모 / 자식 컴포넌트간의 데이터 교환은 3가지 방법이 있다.
- 부모에서 자식에게 보내주기
- 자식에서 부모의 값을 바꾸기
- 자식, 부모 둘다 함께 쓸 수 있게 설정
1-1. 부모에서 자식에게 보내주기 - Props
아래와 같이 부모 컴포넌트에서 자식 컴포넌트를 호출할때, ":속성이름= 속성값"이렇게 데이터를 보내줄 수 있다.
<template>
<inputField :title = "YOUYOU"/>
</template>
<script>
import inputField from '@/components/layout/inputField';
</script>
그럼 자식 컴포넌트에서는
<template>
<div>
<form>
<label>ID</label>
<input type="text" :value = "title" style = "padding: 20px; border: 1px pink solid">
<button>Submit</button>
</form>
</div>
</template>
<script>
export default {
props : {
title : {
type : String,
required : true
}
}
}
</script>위 코드처럼 props를 정의하고, 그 안에 받아올 변수 명과 type을 설정할 수 있다.
결론 : ":title" 처럼 제일 앞에 :가 붙어있으면, 자식컴포넌트에게 props로 보내주는 것이다.
1-2. 자식에서 부모의 값을 바꾸기 - Emit
자식 컴포넌트에서 변경된 값을 부모 컴포넌트에 적용할 때는 "$Emit"을 사용한다.
자식에서는 아래와 같이 작성한다. this.$emit('@에서 작성한 emit 명칭', 현재 컴포넌트에서 전송할 Event나 Data 명)
<label>ID</label>
<input type="text" :value = "title" @input = "$emit('titleFromChild', $event)" style = "padding: 20px; border: 1px pink solid">
<button>Submit</button>
부모에서는 아래와 같이 작성한다. @emit으로받아올event명="현재 컴포넌트에서 사용할 Event 명"
<inputField :title = "title" @titleFromChild="title = $event.target.value"/>이렇게 하면, 자식에서 정의한 값을 부모에게 넘겨줄 수 있다.
결론 : $Emit을 사용하면 자식의 데이터를 부모가 사용할 수 있다.
1-3. 자식, 부모 둘다 쓸 수 있게 설정 - v-model
지금까지 작성한 것은 부모에서 자식으로 props를 내려주고, 자식에서 $emit으로 event값을 부모로 올려준 다음, 부모에서 props로 내려주는 data 값을 event 값으로 변경해주는 방식이였다. 이것을 조금 더 단순화하는 방식이 v-model이다.
v-model을 html 태그에 적용하면 양방향 바인딩이 되어 props를 자식 컴포넌트에서 수정하게 되지만, 컴포넌트 자체에 v-model을 걸게되면 부모-자식 컴포넌트 간 바인딩이 이루어져서 자식에서 직접 props를 바꾸는 것이 아니라 부모 컴포넌트에서 props에 해당하는 data 값을 바꾸는 방식이 된다.
부모에서는 아래와같이 v-model에 값을 넣어주면 된다.
<div>
<inputField v-model="title" />
</div>
그럼 자식에서는 아래와 같이 value로 받아올 수 있다. 그리고 value값을 자식에서 변경하면, 부모의 값도 함께 변경된다.
<input type="text" :value = "value">
결론 : v-model 속성을 사용하면, 부모-자식 컴포넌트에 양방향 통신이 가능하다.
이렇게 부모 자식간의 데이터 교환을 정리해봤다. 가장 많이 쓰이는 만큼 개념을 잘 정리하고, 활용하는 것을 추천한다.
다음에는 2번. Vuex Store에 대해 알아보겠다.
참고 블로그 :
'개발합시다. > 개발을 더 잘하기 위한 노력' 카테고리의 다른 글
| 코드리뷰 문화를 만들어보자. [총정리] (1) | 2022.08.18 |
|---|---|
| Vue의 데이터 교환 3 [EventBus] (0) | 2022.08.12 |
| Vue의 데이터 교환 2 [Vuex Store] (0) | 2022.08.12 |
| 쿠키와 세션 완벽 정리 (0) | 2022.08.05 |
| CORS 에러를 끝내기까지의 여정 (0) | 2022.07.29 |
