VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 전달하는 방법중 sync modifider(수식어)를 사용하는 방법에 대하여 알아봅니다.






# sync 수식어를 사용하여 컴포넌트 데이터 전달
먼저 sync 수식어는 부모와 자식 컴포넌트 사이의 양방향 데이터 바인딩이 가능하도록 해줍니다. 다시말해 부모에서 자식으로 또는 자식으로 부모로 데이터를 변경, 업데이트 할 수 있다는 것입니다.


! 양방향 바인딩의 다른 방법은?
물론 sync 수식어외에 다른 방법도 존재합니다. 예를들어 v-model을 사용할 수도 있고 아니면 props에 $emit 이벤트를 사용하여 전달하거나 vuex나 이벤트 버스등의 전역 이벤트를 사용하기도 합니다. 하지만 sync를 사용하는 는 이유는 가장 크게 매우 간단하게 사용할 수 있기 때문입니다.

아래 코드를 보시면 그 이유를 알 수 있습니다.
<child-component siteName.sync="mySitename" />

VueJS의 장점에서 편리한 수식어를 빼놓을 수 없는데요 이처럼 간단한 수식어 사용만으로 siteName이란 prop을 서로 동기화하여 사용하게 됩니다.


! sync 수식어 예제보기
그럼 간단한 예제 코드를 살펴보며 어떻게 사용하는지 알아봅니다. 먼저 부모 컴포넌트에 위와 같이 자식 컴포넌트를 추가합니다.

@ parentComponent.vue
<template>
  <div>
    접속중인 {{ mySiteName }} 사이트입니다.
    <br />
    <child-component  :my-sitename.sync="isOn" />
  </div>
</template>

<script>
export default {
  data: {
    return function() {
      mySitename: 'webisfree.com'
    }
  }
}
</script>

이제 mySitename 이름의 prop를 사용하여 자식 컴포넌트에 'webisfree.com' 데이터 값이 추가되었습니다. 실행하면 아래와 같이 화면에 나타나게 됩니다.
접속중인 webisfree.com 사이트입니다.
webisfree.com

[ 바꾸기 ]

다음으로 자식 컴포넌트 코드입니다.

@ child-component.vue
<template>
  <div>
    {{ mySitename }}
    <br /><br />
    <button @click="updateName">[ 바꾸기 ]</button>
  </div>
</template>

<script>
export default {
  props: [ 'mySitename' ],
  methods: {
    updateName: function() {
      this.$emit('update:mySitename', '');
    }
  }
}
</script>

자식 컴포넌트에서 살펴볼 부분은 아래 부분 입니다.
this.$emit('update:mySitename', '');

자식 컴포넌트에서 sync가 적용된 prop의 값을 바꾸기 위해서 위와 같이 사용해야 합니다. 문법은 다음과 같죠.

this.$emit('update:prop이름', 변경할 값);


이제 버튼을 클릭할 경우 updateName 함수가 동작하며 부모 컴포넌트에 적용된 mySitename의 값을 ''인 빈 값으로 업데이트 할 것입니다.

클릭하면 아래와 같이 webisfree.com이 지워지고 나타나게 됩니다. 부모와 자식 컴포넌트 모두 값이 바뀌었죠.
접속중인 사이트입니다.

[ 바꾸기 ]

매우 간단하게 양방향 컴포넌트 사이의 바인딩이 되었습니다. 여기까지 sync 수식어에 대하여 알아봤습니다.