function props에 대해서

Vue에서는 기본적으로 상위 컴포넌트에서 하위 컴포넌트를 업데이트하기 위해 props로 데이터를 보내고

 

하위 컴포넌트에서는 event emit을 사용해 상위 컴포넌트에서 핸들러를 통해 메서드를 호출하게 된다.

 

<template>
  <!-- 상위 컴포넌트 app.vue -->
  <div id="app">
    <!-- 하위 컴포넌트에서 발생하는 이벤트 등록(increase) -->
    <ShowCount :count="this.count" @increase="increaseCount"/>
  </div>
</template>

<script>
import ShowCount from "./components/ShowCount";

export default {
  name: "App",
  components: {
    ShowCount
  },
  data() {
    return {
      count: 0
    };
  },
  // count를 증가시키는 메서드
  methods: {
    increaseCount() {
      this.count++;
    }
  }
};
</script>

<template>
<!-- 하위 컴포넌트 showCount.vue -->
  <div>
    <div>{{ count }}</div>
    <button @click="increaseEventEmit">누르면 증가</button>
  </div>
</template>

<script>
export default {
  name: "App",
  props: { count:number },
  methods: {
    // increase 이벤트 발생시키는 메소드, 버튼 클릭시 실행
    increaseEventEmit() {
      this.$emit("increase");
    }
  }
};
</script>

 

상위 컴포넌트에서 하위 컴포넌트로 count 데이터를 props로 보내고,

 

하위 컴포넌트에서는 $emit을 통해 상위 컴포넌트의 count 데이터의 값을 변경하는 간단한 앱이다.

 

일반적으로 props에는 정적 / 동적 데이터를 전달하게 되는데 위와 같은 상황에서는 count와 더불어 count를 컨트롤 할 수 있는 메서드를 함께 props로 내리면 편하지 않을까?

 

함수를 props로 보내는 것은 '가능'하다.

 

<template>
  <div id="app">
    <!-- v-on bind로 함수를 넘겨줌  -->
    <ShowCount :count="this.count" :increaseCount="this.increaseCount"/>
  </div>
</template>

<script>
...
</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="increaseCount">누르면 증가</button>
  </div>
</template>

<script>
export default {
  name: "App",
  props: {
    count: Number,
    increaseCount: Function
  }
};
</script>

 

위의 코드는 event emit을 사용했던 코드와 똑같이 잘 작동한다.

 

사실 함수를 props로 보낸다는 생각은 해본적이 없다.

 

Vue 공식 문서에도 props로 보낼 수 있는 타입에 함수형을 기술하진 않았지만 뭔가 어렴풋이 뭐든지 전달 가능하다는 걸 알려준거같기도하고...

 

Promise도 전달할 수 있는 모양이다.

 

실제로 회사에서 진행중인 프로젝트에서 위와 같은 형태로 함수를 props로 전달하는 코드를 보게되어 해당 내용을 확인해보게된것이다.

 

 

 

그런데 실제로 코드들을 보게 되면 위와 같이 함수를 props로 전달하는 모습은 흔치않다.

 

서칭하던 중 흥미로운 글을 읽게되어 해당 내용을 조금 발췌해서 적어보자면

 

 

Vue에서 function props는 실제로 잘 작동을 하지만 이것이 Vue의 안티패턴일까?

• event emit이 브라우저가 이벤트를 감지해내는 동작과 비슷하고, 이것은 Vue의 설계 취지이니 존중해야한다.
• 한 컴포넌트를 여러번 재사용할 경우, 그 컴포넌트에 일일이 함수를 prop으로 넘기는 것 보다 event emit을 이용하는 것이 더 깔끔하다.

 

하지만 공식적으로 Vue에서는 function props에 대해 경고한 적도 사용하지 말라고 한적도, event emit이 보다 좋은 방법이니 사용하라고 권고한 적도 보지못했기 때문에 잘못된 방식이라고 딱 잘라 말하기는 쉽지않다.

 

 

 

function props와 evemt emit 둘 다 잘 사용하면 굉장히 좋은 방식이겠지만, 무분별하게 이유없이 혼용해서 사용하는 것 보다는 한 가지 방법으로 왠만하면 통일하는 것이 깔끔하지 않을까 하는 개인적인 의견이다.

 

 

결국은 상위 컴포넌트와 하위 컴포넌트 둘 중에 어떤 컴포넌트에 데이터를 업데이트할 책임이 있는지 결정할 것이다.

 

event emit의 경우 하위 컴포넌트가 상위 컴포넌트에 데이터를 업데이트해야 한다는 사실을 알려주고 실질적인 업데이트는 상위 컴포넌트에서 이루어진다.

 

props의 경우 전달하는 데이터 등을 상위컴포넌트에서 하위 컴포넌트로 위임해서 사용한다고 볼 수 있을 것이다.

 

따라서 event emit은 컴포넌트의 특정 데이터와 관련있는 로직들이 해당 컴포넌트에만 존재하고 수행할 수 있게 만든다.

 

컴포넌트들이 다른 컴포넌트에 덜 의존하게 만든다.

 

 

마지막으로 Vue 공식 문서에서 발췌한 구절이다.

 

 

# v-on 을 이용한 사용자 지정 이벤트의 $emit 중