더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.

HOME > vuejs

[VueJS] 부모 자식 컴포넌트간의 데이터 전달하는 방법, sync modifier 수식어 사용

Last Modified : 2022-02-04 / Created : 2019-11-26
6,812
View Count
VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 전달하는 방법중 sync modifider(수식어)를 사용하는 방법에 대하여 알아봅니다.





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


! sync 양방향 바인딩과 다른 방법의 차이점은?
부모와 자식 사이의 데이터를 전달하는 방법은 여러가지가 존재합니다. 예를들어 v-model을 사용할 수도 있고 아니면 props에 값을 변경하기 위해 sitename 이름의 props에 추가로 updateSitename 이벤트를 props로 전달하는 방법도 있습니다. 여러 방법이 있지만 sync를 사용하는 이유는 매우 쉽고 간단하게 사용할 수 있기 때문입니다.

참고1. 상태불변성(immutability)을 고려한다면 부모의 값까지 변경하는 양방향 바인딩은 에러 및 유지보수, 관리 등의 사유로 주의가 필요합니다.

참고2. 사실 sync는 부모와 자식 사이의 축약 형태(shortcut)와 동일합니다. 아래의 예제에서 알 수 있듯이 sync를 적용하더라도 자식 컴포넌트에서 값을 변경할 경우 $emit()을 사용해야 하는 것은 동일합니다.


다음으로 sync의 간단한 문법을 알아봅니다. sync 수식어가 적용된 아래 코드를 보시면 sync가 얼마나 쉽게 적용했는지 알 수 있습니다.
<child-component :my-sitename.sync="mySitename" />

이처럼 VueJS의 장점에서 sync와 같은 편리한 수식어를 빼놓을 수 없는데요 이처럼 간단한 수식어 사용만으로 siteName이란 props를 부모와 자식 컴포넌트가 서로 동기화하여 사용할 수 있습니다.


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

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

자식 컴포넌트에서 살펴볼 부분은 아래 부분 입니다. 아래와 같이 $emit()을 사용하여 값을 업데이트하게 됩니다. 다만 이때 update:propName 형태로 사용해야 합니다.
this.$emit('update:mySitename', '');

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

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


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

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

[ 바꾸기 ]

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

#수식어#modifier
Author ByEnSSo

이전 글 보기

Post thumbnail VueJS 부모 자식 컴포넌트에 props 사용하여 양방향 바인드 방법

다음 글 보기

[VueJS] 태그에 백그라운드 이미지 추가하는 방법 Post thumbnail

해당 카테고리 최신 글