# 받은 props 활용하기 KH

# 서론

props전달 및 event 상속에서 부모와 자식간 데이터 전송에 대해 알아봤습니다.

개발을 하다보니 받은 props를 자식단에서 처리해야 할 경우가 생겼습니다. 원칙대로라면 부모로부터 handler 함수를 받아 처리하는 것이 맞지만 실제 개발에서 사용하다보니 피치 못할 경우들이 있었습니다.

그래서 자식단에서 props로 받은 부모의 값을 어떻게 핸들링했는지 살펴보도록 하겠습니다.

# props 바꾸는 방법

받은 props를 아래처럼 직접 할당하면

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  computed() {
    this.list = this.list.reverse();
  }
};
</script>

Vue Error: Avoid Mutating a Prop Directly 이런 직접 할당하지 말라는 에러를 내뿜습니다.

그러면 어떻게 바꿔야 옳게 props를 활용하는지 알아봅시다.

1. 재할당 아닌 props 바꿈 이 방법도 추천하지는 않습니다. react는 이 방법으로 할당하면 에러를 뿜는데 vue는 그냥 넘어가더군요 예시는 아래와 같습니다.

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  methods: {
    deleteList(index) {
      //배열의 중간 요소 제거
      this.list.splice(index, 1);
    }
  }
};
</script>

위처럼 props를 재할당 하는 것이 아니라 props 내부를 바꾸는 작업은 허용하였습니다. 하지만 불변성이 어긋남으로 추천하지 않습니다.

2. 값 복사 활용 props로 받은 데이터를 복사하여 활용하는 방법입니다.

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
    person: {
      type: Object
    }
  },
  created() {
    this.copyData = this.list.slice();
    this.copyPerson = JSON.parse(JSON.stringify(this.person));
  }
  computed: {
    newData() {
      return this.copyData;
    },
    newPerson(){
      return this.copyPerson
    }
  }
}
</script>

위처럼 배열로 받은 props의 경우 복사하여 그 값을 마음대로 활용할 수 있습니다. 객체인 경우 JSON.parse(JSON.stringify(obj));를 활용하면 복사 가능합니다.

3. computed 활용 props로 받은 값을 computed에서 받아 원하는 방향으로 핸들링합니다.

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  computed: {
    reversedList() {
      return this.list.reverse();
    }
  }
};
</script>

4. 주의사항 위 방법들을 사용할 때, 주의할 점이 있습니다.

  • 할당 하는 값이 props와 같은 이름을 사용하지 않는다.
<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      //중복 이름 사용 금지
      list: JSON.parse(this.list)
    };
  }
};
</script>

# 결론

자식단에서 props를 활용하는 방법에 대해 알아보았습니다.

유념하실 부분은 작업량이 많아지고, 많은 컴포넌트에서 사용할 기미가 보이면 지금껏 작업한것 중지하시고 바로 store 작업 들어가시는 것이 마음 편할 것입니다.

그렇지 않고 몇 줄 안되는 작업이라면 event 버스활용하여 handler 함수를 상속받거나, 자식단에서 받은 props를 값 복사하여 그 값을 활용하시면 됩니다.

Last Updated: 3/24/2021, 8:55:12 PM