Vue.js - 전역 component / template / vue data / props / [강좌 2강정리]

인프런 무료강좌중 Vue에대한 기본 강좌가 있어서 공부하면서 정리해봤습니다. 참고용으로 보시면 좋을것 같습니다.

 

설명도 매우좋고, 초반에 Vue에 대한 개념을 잡을 때 좋은 강좌인것 같아서 추천드립니다. ~

 

사이트 주소 : https://www.inflearn.com/course/web-game-vue/#

 

 

(2-1강)

Vue 컴포넌트의 사용 이유 

• 컴포넌트 사용은 데이터가 중복되는 것을 피하고 동일한 내용을 반복하고자 할때 사용한다.

• 컴포넌트를 사용하지 않게 되면, 코드가 지저분하고 중복이 되게 된다.

• 반복되는 부분을 Component로 만든다.

• Vue 컴포넌트는 다음과 같이 작성한다. (파스칼 케이스나 케밥케이스를 사용)

Vue.component(‘word-replay’);

 

Vue 에서 알아두면 좋은 변수 표기법

• kebab-case : Vue.component(‘word-relay’)

• Pascal-case : Vue.component(‘WordRelay’)

• camel-case : Vue.component(‘wordRelay’) (x)
  
  

(2-2강)

Vue 컴포넌트에서의 Data

• 컴포넌트에서도 data값을 이용하여 데이터를 관리한다 

• 컴포넌트에서는 data객체 값을 선언할때 객체리터럴을 이용해 값을 선언하는 것이 아니라 return값을 통해 객체 리터럴을 반환한다.
  (객체를 반환하는 함수를 만든다)

• 컴포넌트는 data가 각각 컴포넌트마다 달라야하기 때문에 return을 이용하여 컴포넌트의 data를 관리한다.
  (데이터의 분리) 
  
  

// 일반 Vue객체에서의 Data (객체 리터럴)
const app = new Vue({
  data: {
    word: '안녕하세요',
    result: '',
    value: '',  
  }
});

// 컴포넌트에서의 Data (return 객체 리터럴)
export default() { 
  data() {
    return {
      data: {
        word: '안녕하세요',
        result: '',
        value: '',
      }
    };
  },
}

 

Vue 컴포넌트에서의 Template

• 컴포넌트의 template속성에서 반환하는 html 엘리먼트는 항상 하나의 최상위 root element를 가져야 한다.

  • root element로 사용되는 <div>태그는 <template>태그로 대체할 수 있다.

  • CDN을 이용하여 script를 vue를 import하여 사용할 경우에는 해당 template 태그가 동작하지 않는다. (지원 x)

  • webpack을 이용하여 컴포넌트를 import하여 사용할 경우에는 가능하다 (webpack을 쓰는 이유중 하나)

• template와 백틱 (``) 문자열의 사용이 필요하다.

  • 백틱 문자열은 줄바꿈할때 편리하다. (ES6를 공부하면 알 수 있음)

Vue.component('word-relay', {
  template: `
     <template>  <!-- <template> 또는 <div>가 옴. (root element는 무조건 1개) -->
       <div>{{word}}</div>
          <form v-on:submit="onSubmitForm">
            <input type="text" ref="answer" v-model="value">
            <button type="submit">입력!</button>
          </form>
       <div>{{result}}</div>
     </template>
  `,
  data() {
  ...
  }
  
  
const app = new Vue({ // 컴포넌트가 Vue의 선언보다 앞서서 선언되어야 함 
  el: '#root',
});

 

Vue 컴포넌트의 선언 위치

• Vue.component(뷰 컴포넌트)는 new Vue() (뷰의 선언) 보다는 상단에 와야 동작한다. **바로 이전 스크립트 참고**

  • 해당 Vue.component를 전역 컴포넌트라고 부른다.

  • 지역 컴포넌트는 다음장에서 배운다. :) 

• 서버는 모든 컴포넌트를 처음에 내려받고 화면을 랜더링한다.
  (이미 화면은 처음부터 정해져있다, 데이터만 변경되는것이다)

 

2-3강

Vue 컴포넌트에서 Props를 사용해야 될 때

• 동일한 내용이나, 같은부분이 반복되는 것은 component를 이용하여 표현할 수 있다.

• 그렇지만 반복되는 컴포넌트가 정확히 같은내용이 아닐경우 (사용자의 댓글, 블로그 게시글 썸네일) 등 전체적인 큰 틀은 중복되지만 그 안의 내용이 다른 부분이 있는 경우에는 컴포넌트 선언시 props속성을 이용하여 각각 다른 내용을 전달 해줄 수 있다.

 

Vue 컴포넌트에서 Props 사용 및 표기법

• 뷰 템플릿에서 컴포넌트의 속성값으로 명시하여 준 이름을 props 키값을 통해 배열로 매칭시킨다.

• Vue의 HTML상의 props는 kebab-case로 작성하여야 한다. (camel-case로는 작성이 불가능)

• HTML Tag의 속성은 대소문자를 구별하지 않는다. 따라서 Vue의 컴포넌트나 props등을 등을 가져오기위해 HTML에서 태그를 사용할때는 반드시 kebab case를 사용해야한다.

• JS에서 props를 가져올때는 보통 camel-case로 가져온다. (template에서 camel-case를 사용하면 안된다. 헷깔림 주의)

• props는 컴포넌트의 선언시의 {props: [배열]} 형식의 속성값으로 들어간다.

<div id="root">
  <word-relay start-word="제로초"></word-relay> <!-- 컴포넌트나 props는 kebab-case로 표현함 -->
  <word-relay start-word="초밥"></word-relay>
  <word-relay start-word="바보"></word-relay>
</div>

• 자바스크립트 쪽에서는 camel-case로 받을수 있다. (알아서 뷰가 처리를 해준다)

  Vue.component('word-relay', {
    template: `...`,
    props: ['startWord'], // camel-case로 props전달 받음
 } 

 

Vue 에서 웹펙을 사용해야 하는 이유

• 웹팩을 사용해야 되는 이유(느끼게되는 이유는) JS파일이 커지다보면 js파일을 <script></script>로 import해서 계속 사용하고 점점 커지게 되는데, 코드의 복잡성이 증가하고 꼬이게 되는 문제가 발생한다. 

• 그래서 나온것이 CommonJS, RequiredJS이다.

• 웹팩이 나오면서 스크립트가 여러개 있을때 하나로 합쳐주는 역활을 한다.

• 스크립트의 관리를 효율적으로 할수 있도록 도와준다. (3강...)