[Vue.js] 이슈부터 해결하는 Vue 프레임워크 Deep Dive (feat. 공식문서)

Vue.js 프레임워크를 이용해 개발하며 마주했던 문제와 해결 방법에 대해서 작성합니다.
 

---

[Issue1]

상위 컴포넌트의 data의 값이 변경될 때, 하위 컴포넌트에 props로 바인딩 한 값이 변경되지 않는 현상.
 
(업무 예시 : 요금조정 컴포넌트(상위 컴포넌트)에서 axios 통신으로 받아온 데이터(vuex- state)로 DatePicker 컴포넌트(하위 컴포넌트) 날짜 변경(props data)을 해야 하는데 변경되지 않는 이슈 발생) 
 

[Solve1]

하위 컴포넌트에 :key ="props value" 를 속성으로 추가하면,
해당 데이터 변경 시 해당 하위 컴포넌트 데이터 변경 감지함.
 

<script>
import Child from "./components/ChildComponent.vue";

export default {
  components: { Child },
  data() {
    return {
      pinMoney: 100,
    };
  },
  methods: {
    onClickAddMoeny() {
      this.pinMoney += 10;
    },
  },
};
</script>

<template>
  <div class="parent-box">
    <p>부모 컴포넌트 입니다.</p>
    <div class="child-box">
      <Child 
      	:key="pinMoney" 
      	:money="pinMoney" />
    </div>
    <button 
    	type="button" 
        @click="onClickAddMoeny"
    >용돈 주기</button>
  </div>
</template>

( 해당 예시에서는 :key 없이도 잘 변경이 됩니다..!  :key를 어떻게 사용하는지에 대한 예시만 참고해 주시면 감사하겠습니다.)

 

---

[Review]

컴포넌트 사용 시,  값이 변해도(data 변화) 감지(반응성)하지 못하고 컴포넌트 props로 주는 값이 적용되지 않았다.
이에 첫 번째 해결 방법으로 watch를 사용하여 immediate : true를 설정하여 해결했었지만, 마음에 들지 않았다.
이에 대해 해결 방법을 더 탐구한 결과 :key를 사용하면 데이터변화를 감지하게 해준다는 것을 알게 되었다.
key는 v-for에서만 사용하는 것인줄 알았다. ( 가장 일반적인 경우 )
 
공식문서에 따르면, 

:key가 없으면 Vue는 엘리먼트 이동을 최소화하고
동일한 유형의 엘리먼트를 가능한 한 제자리에서 패치/재사용하는 알고리즘을 사용합니다.

참고 : vue.js 문서 https://v3-docs.vuejs-korea.org/api/built-in-special-attributes.html#key 

 

일반적으로 Vue는 데이터 변화를 감지하고 이를 적용하는 반응성이 큰 장점입니다.

(반응성 : 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행)

 

하지만 이 데이터 변화를 감지하는 것이 사실은 엘리먼트 이동을 최소화(컴포넌트 간의 이동을 최소화한다고 생각합니다.) 가능한 한 제자리에서 패치/재사용하는 알고리즘을 사용한 다는 것을 알게 되었습니다.
 
따라서 해당 데이터의 변화를 컴포넌트에 적용시키는 것은,
엘리먼트 이동을 하는 것이기 때문에 이동 최소화의 벽을 넘어서야 한다고 생각합니다.
 

특수속성 :key는 엘리먼트/컴포넌트를 재사용하는 대신 강제로 교체하는 데 사용할 수도 있습니다.
다음과 같은 경우에 유용할 수 있습니다:
- 컴포넌트의 생명 주기 훅을 올바르게 트리거함.
- 트랜지션 트리거

참고 : vue.js 문서 https://v3-docs.vuejs-korea.org/api/built-in-special-attributes.html#key 

 

이에 따라 :key를 사용하면 해당 이동 최소화의 벽을 넘어 강제(?)로 교체하는 데 사용할 수 있습니다.
추가적으로, :key 에는 문자열, 숫자, 심볼 형식의 값만 바인딩해야 한다고 합니다.

 

 

---

[참고] 

영어 원문 : https://vuejs.org/api/built-in-special-attributes.html#key
한글 번역 : https://v3-docs.vuejs-korea.org/api/built-in-special-attributes.html#key
한글 번역 : https://v3-docs.vuejs-korea.org/guide/essentials/list.html#maintaining-state-with-key