props와 webpack의 필요성

props

react를 떠올려 보며 props를 이해해보자.
props를 통해 특정 컴포넌트로 원하는 값을 주어지게 할 때 사용한다.

1. kebop-case
   HTML 태그 내에서 props 값을 지정할 때에는
   이름을 kebop-case로 작성해야 한다.
   script 내에서 props를 받거나 component 명명할 때에는,
   camelCase로 작성해도 자동으로 인식한다.

2. props 받기
   props는 컴포넌트 생성자 내에서
   props: [props 이름]으로 받는다.

webpack이 왜 필요한데?

html 내에서 수많은 script src를 참고하는 경우가 있을텐데,
이 때에 보기도 어려울 뿐더러,
작성 순서도 고려사항이기 때문에 사용하는 데에 어려움이 있다.
webpack을 사용하여 이런 문제를 해결해본다.
여러 script들을 하나의 bundle로 묶어서 줄여준다.

주의사항

webpack을 사용하는 경우,
각 컴포넌트 내에서 지정해준 css classname이 동일한 경우가 있으면 안 된다! bundling이 될 때 classname의 충돌로 인하여 예상치 못한 style 적용 에러가 발생할 수 있다!

예시

1. 렌더할 컴포넌트와 props 명시

<div id="root">
    <WordRelay start-word='김상우'>
    <WordRelay start-word='김밥'>
    <WordRelay start-word='우산'>
</div>

2. 컴포넌트의 정의

• 형태 및 속성 (template, props)
• 기능 (script, methods)

  <script>
  //Vue.component 생성자로 만든 컴포넌트는 일종의 전역 컴포넌트이다
      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>
          `,
        props: ['startWord'],
          data: {
              return {
                word: this.startWord,
                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>