Vue 컴포넌트의 필요성과 특성

필요성

v-on, v-model 등의 삽입이 이뤄진 태그들을 재사용하고자 할 때에 유용하다.
기존에 작성한 태그의 코드를 그대로 복사하여 사용하게 되면,
모두 같은 data 객체를 공유하므로,
각각의 복사된 태그별로 data 내부 값을 새롭게 지정해주어야 한다.
그럼 또 각 data에 붙어있던 methods도 각각 새로 지정해줘야만 한다.

결국 복사된 태그 갯수만큼 data 객체, methods 크기가 불어나게 되어버리는 것이다!

코드의 중복은 지양해야한다

컴포넌트 (Vue.component('이름'))

• 반복되는 코드를 가진 태그를 묶는 최소단위.

• template, data, methods로 구성

  1. template
  • 원하는 컴포넌트의 태그 형태를 template에 담아 준다.
  • react와 마찬가지로 컴포넌트는 하나의 큰 부모태그 안에 담겨있어야 한다.
  2. data
  • Vue instance에서 관리하던 data, methods들은 컴포넌트 내부로 이동시켜 정의 후 사용
  • 컴포넌트 내부에서 data를 정의할 때는 Vue instance 때와 다른 점이 있다.
  • 컴포넌트 내부 data는 함수의 형태가 되어야 한다.
  • 참조의 문제 때문이다. 각 컴포넌트 별 data 객체를 달리 가져가기 위함이다.

컴포넌트 사용 시 주의사항

• Vue instance 보다 상단에 정의해야 한다.
• 컴포넌트 정의하는 script 태그는 Vue instance의 el에 해당하는 태그 보다 하단에 정의해야 한다.

//앞선 글의 끝말잇기 부분의 코드를 재활용하고자 할 때, component로 만들어 관리해보려 한다.
<div id="root">
/*
    <div>{{word}}</div>
    <form v-on:submit="onSubmitForm">
        <input type="text" ref="answer" v-model="value">
        <button type="submit">입력</button>
    </form>
    <div>{{result}}</div>
</div>
*/
    <WordRelay></WordRelay>
    <WordRelay></WordRelay>
    <WordRelay></WordRelay>
</div>
//여기서부터 component 생성에 대한 코드
  <script>
      Vue.component('WordRelay', {
          template: `
          <div>
              <div>{{word}}</div>
                  <form v-on:submit="onSubmitForm">
                      <input type="text" ref="answer" v-model="value">
                      <button type="submit">입력</button>
                  </form>
              <div>{{result}}</div>
          </div>
          `,
          data: {
              return {
                word: '생우',
                result: '',
                value: ''
            };
          },
          methods: {
            onSubmitForm(e) {
                e.preventDefault();
                if(this.word[this.word.length - 1] === this.value[0]) {
                    this.result = '정답!';
                    this.word = this.value;
                    this.value = '';
                    this.$refs.answer.focus();
                } else {
                    this.result = '땡!';
                    this.value = '';
                    this.$refs.answer.focus();
                }
            }
          }
      }) 
  </script>