Vue 컴포넌트 Basic

 

이번 시간에는 vue 컴포넌트 개발을 위한 기본 문법에 대해서 알아봅니다. 컴포넌트에 대한 이해와 Vue 컴포넌트 코드 구조를 이해합니다.

1. 컴포넌트란?

웹 사이트 화면에서 하나하나가 수많은 웹 요소로 구성되어 있습니다. 예를 들어 버튼, input, 이미지 등으로 구성되어 있습니다. 이런 작은 단위의 여러 개 View 중에는 다른 화면에서도 사용됩니다. 이런 단위의 View를 재사용할 수 있는 구조로 개발하는 것을 컴포넌트라고 합니다. Vue로 개발된 파일(.vue)가 모두 컴포넌트입니다.

Vue CLI를 이용해서 프로젝트를 최초 생성했을 때 src 폴더 밑에 components와 views(vue-router 설치 시 생성)이 존재합니다. 해당 역할은 아래와 같이 사용됩니다.

• views 폴더: 페이지라고 부르는 화면 하나하나에 해당하는 vue 컴포넌트 파일 - 페이지 단위
• components 폴더: 다른 vue 파일에서 호출하는 공통으로 사용되는 vue 컴포넌트 파일 - 페이지 안에 구성되는 작은 컴포넌트 단위

---

2. 컴포넌트 구조 이해하기

2-1. 컴포넌트 기본 구조

싱글 파일 컴포넌트는 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법입니다. 뷰 CLI로 프로젝트를 생성하고 나면 App.vue라는 파일을 확인할 수 있습니다. 이처럼 vue 확장자를 가진 파일을 모두 싱글 파일 컴포넌트라고 합니다.

컴포넌트 코드 구조는 아래와 같습니다. html, 자바스크립트, css로 구분됩니다.

<!-- .vue 파일 구조 -->
<template>
  <!-- html (뷰 컴포넌트의 표현단, 템플릿 문법) -->
</template>

<script>
  // 자바스크립트 (뷰 컴포넌트 내용)
</script>

<style>
  /* CSS (뷰 템플릿의 스타일링) */
</style>

자바스크립트에서 자주 사용되는 코드 구조를 살펴봅니다.

컴포넌트 라이프사이클 훅에는 created, mounted, unmounted 외에도 더 많은 라이프 사이클 훅이 존재합니다. 하지만 실무에서는 3가지를 가장 많이 사용합니다.

<template>
  <div>
    <!-- html (뷰 컴포넌트의 표현단, 템플릿 문법) -->
  </div>
</template>

<script>
export default {
  name: '',       // 컴포넌트 이름 
  comments: {},   // 다른 컴포넌트 사용 시 import해서 사용. 배열로 저장 
  data() {        // html과 js 코드에서 사용할 데이터 변수 선언. 전역으로 등록. 데이터 바인딩. 양방향 통신 가능   
    return {
      simpleData: ''
    };
  },
  setup() {},     // 컴포지션 api 메소드 
  created() {},   // 컴포넌트 생성되면 실행 
  mounted() {},   // template에 정의된 html 코드가 랜더링된 후 실행 
  unmounted() {}, // unmount가 완료된 후 실행 (컴포넌트를 빠져나갈 때)
  methods: {}     // 컴포넌트 내에서 사용할 메소드 정의 
}
</script>

<style>
/* CSS (뷰 템플릿의 스타일링) */
</style>

 

2-2. 컴포넌트 기본 구조 snippet 설정 - Webstorm

위 코드는 vue를 개발할 때 항상 작성해 놓고 시작해야하는 코드입니다. 이를 쉽게 불러오기 위해 snippet에 등록해 보겠습니다.

위에 코드를 아래와 같이 snippet 설정을 합니다. jetbrains 사이트 참고

1. 원하는 코드를 선택한다. (위 코드 선택)
2. Cmd/Ctrl+Shift+A 타이핑하고 Save as Live Template 선택합니다.
3. abbreviation에 약어 vue를 넣고, description에 설명을 넣습니다.
4. 저장합니다.

jetbrains 사이트 참고

 

이번 시간에는 vue 컴포넌트 개발을 위한 문법에 대해 알아보았습니다. 다음 시간에는 데이터 바인딩에 대해서 알아보겠습니다.