Vue 2-2 props와 웹팩의 필요성

컴포넌트 재사용을 하는 경우에 대부분 같은데 가끔 다른게 나오는 경우가 있다.

댓글은 달리는데 댓글 다는 사람과 내용, 날짜가 다른 것 처럼

메뉴도 같은 모양이지만 글자 내용이 달라지는 것 처럼

props를 사용해서 차이를 줄  수 있다.

props사용

아래와 같이 같은 기능을 하는 컴포넌트에 시작 단어를 다르게 주고 싶다면

• 컴포넌트를 쓰는 쪽에서 startWord를 넣어주고

<word-relay start-word="나무늘보"></word-relay>
<word-relay start-word="두부"></word-relay>
<word-relay start-word="유키"></word-relay>

• 컴포넌트를 정의하는 부분에서는 startWord를 받겠다 
• 그리고 word는 this.startWord로 받아준다.

Vue.component('word-relay', { // 전역 컴포넌트
      template: `
        ...
      `,
      props: ['start-word'],
      data() {
        return {
          word: "this.startWord", // 제시어
          ...
        }
      },

• 컴포넌트는 중복을 피하고 재사용하기 위해 사용하지만 달라지는 부분들은 props로 넣어준다.
• 어떤 props를 쓸지는 props쪽에 넣어주면 된다.

 

주의

html에서는 kebab-case로 적어주고

js쪽에서는 camelCase로 적어준다

  <div id="root">
    <word-relay start-word="나무늘보"></word-relay>
    <word-relay start-word="두부"></word-relay>
    <word-relay start-word="유키"></word-relay>
  </div>
  <script>
   ...
   
   ...
      props: ['start-word'],
      data() {
        return {
          word: this.startWord, // 제시어
          result: "", // 정답여부
          value: "", // 입력한 값
        }
      },
...
  </script>

결과

스크립트가 많아지면 불편함이 생긴다. 

순서도 일치해야하고 하나 수정하면 다른데 영향을 미치게 되기 때문에 

웹팩을 쓰면?

하나로 합쳐주는 역할을 해서 스크립트 여러개 있을 때 복잡함을 해결해 준다.