Vue의 데이터 교환 1 [Props/Emit]

Vue는 컴포넌트 단위로 메소드/ 변수 등을 구성한다. 이번에는 컴포넌트 사이에서 어떻게 메소드 / 데이터를 호출하는지 알아보자.

너무 자세하게 설명하는 것이 아닌, 이럴땐 이렇게 하며 좋다라는 개념과 지식을 전달하기 위함이다.

구체적인 내용은 구글링 해보시길. ( 이정표 같은 글을 추구 )

 

경우의 수는 3가지가 있다.

1. 부모/자식 컴포넌트 사이에서 호출하기 위한 설정 -> 부모컴포넌트와 자식컴포넌트 사이에는 특별한 호출방식이 있다.
2. 모든 컴포넌트에 적용할 데이터/메소드 설정 -> 전역변수로 생각하면 편하다.
3. 전혀 관계없는 컴포넌트 사이에서 호출하기 위한 설정 -> 아무관계도 아니지만, 전역으로 할 필요는 없는 경우

 

각각의 상황에서 어떤 기능을 써야되는지 알아보자.

 

---

1. 부모/자식 컴포넌트 사이에서 호출 - Props & Emit

대부분의 컴포넌트는 부모 / 자식의 관계를 가지고 있다. 여기서 말하는 부모 / 자식 관계는 "부모가 자신의 컴포넌트 안에 자식 컴포넌트를 불러온다"의 개념이다. 

 

Ex) Home.vue와 InputField.vue라는 컴포넌트가 있다. Home.vue 컴포넌트 안에서 <inputField> </inputField> 이렇게 호출하면 Home이 부모 / inputField가 자식 컴포넌트가 된다.

 

부모 / 자식 컴포넌트간의 데이터 교환은 3가지 방법이 있다.

1. 부모에서 자식에게 보내주기
2. 자식에서 부모의 값을 바꾸기
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에 대해 알아보겠다.

 

참고 블로그 : 

https://whitepro.tistory.com/255

https://velog.io/@gillog/Vue.js-props-emit-%EB%B6%80%EB%AA%A8-%EC%9E%90%EC%8B%9D-Component-Data-%EC%A3%BC%EA%B3%A0-%EB%B0%9B%EA%B8%B0