Vue 컴포넌트에서 루트 데이터를 활용하는 간편한 방법 – $root, $parent

2023년 11월 17일

Vue 사용시 Vuex 없이 상하위 컴포넌트 간 데이터 주고 받기를 간편하게 할 수 있습니다. 컴포넌트에서 this.$root나 this.$parent를 사용하면 됩니다.

주고 받는 것은 사실 좀 복잡한 일입니다. (사진 Sticker Mule on Unsplash)

루트 데이터의 완료 여부를 고쳐야 한다면 this.$root.is_completed = true, 루트가 가진 메서드를 쓰려면 @click=$root.markCompleted().

<template>
  <div>
    <button @click="$root.markCompleted()">완료</button>
  </div>
</template>
<script>
  export default {
    methods: {
      updateRootData() {
        this.$root.completed = true;
      }
    }
  }
</script>

바로 부모의 것을 사용하려면 $parent 변수를 사용합니다.

<template>
  <div>
    <button @click="$parent.markCompleted()">완료</button>
  </div>
</template>
<script>
  export default {
    methods: {
      updateRootData() {
        this.$parent.completed = true;
      }
    }
  }
</script>

주의사항

다만 주의할 점도 있습니다.

유지보수성: this.$root나 this.$parent를 사용하면 컴포넌트 간의 결합도가 높아집니다. 컴포넌트가 루트나 부모 인스턴스에 직접 의존하게 되므로, 상위 인스턴스의 변경사항이 컴포넌트에 예기치 않은 영향을 줄 수 있습니다.
재사용성: 컴포넌트가 특정 루트/부모 인스턴스의 데이터나 메서드에 의존하면, 그 컴포넌트를 다른 곳에서 재사용하기는 힘들어질 수 있습니다.
응집도: 루트 인스턴스에 많은 데이터와 메서드를 집중시키는 것은 컴포넌트 자신의 응집도를 낮추는 원인이 될 수 있습니다. 이는 각 컴포넌트의 독립성과 책임 분리 원칙을 해칩니다.

이런 문제들이 발생하지 않을 수준에서 사용하는 것이 좋을 텐데요. 제 생각엔 중간 규모의 사이트에서 잘 구조화해 사용한다면 큰 문제가 생길 것 같진 않습니다.

이런 문제를 극복하려면 Vuex_{(최신 추천 패키지는 Pinia)}를 사용하라고 합니다.

👇 댓글 바로 가기

👇 카테고리 글 목록

기타