vue 컴포넌트란? / vue export default 간단 정리

컴포넌트

앞선 포스팅에서 components/안에는 *.vue파일들이 있으며, 이 파일들이 각각 하나의 컴포넌트로 간주된다고 언급한 적이 있다. 이번 포스팅에선 각 컴포넌트가 어떻게 구성되는지 살펴보고, 그 중 <script></script>에 대해서 조금 더 알아보자

*.vue 파일은 크게 3가지 부분으로 이루어져 있다.

<template>
<div>
  <div>
    실제 HTML 태그가 들어가는 일종의 템플릿이다.
  </div>
  <div>
    디렉티브를 활용하여 조건부 렌더링, 값 바인딩 등을 할 수 있다.
  </div>
</div>
</template>
<script>
export default {
  data() {

  },
  computed: {

  }
}
JS 스크립트가 들어가는 부분이다
</sciprt>
<style lang="scss">
스타일 시트가 들어가며 SASS를 사용할 수 있다.
</style>

template

템플릿은 HTML 태그와 vue에서 제공하는 디렉티브, 템플릿, 다른 컴포넌트 등이 들어가는 자리이다.

* 아직 다른 컴포넌트를 집어 넣고 prop을 전달하는 방법은 모르겠다. 알게되면 여기에 링크를 넣도록 하겠다.

간단히 HTML이 들어간다고 생각하면 된다. 이때 주의할 점으로는 하나의 element가 제일 밖에 존재해야 한다. (react도 유사하나, React.Fragment가 있어서 비교적 자유롭다. 잘 찾아보면 vue도 있으려나

script

JS가 들어가서 동작을 정의하는 부분이다.
아래서 조금 더 자세히 다룰 예정이다.

style

말 그대로 CSS나 SCSS 같은 스타일이 들어가는 곳이다.
SCSS 설정 방법은 여기를 참고하면 된다.

vue의 script

스크립트에서는 다른 모듈을 import 할수 있고, script 내에서 export를 통해 컴포넌트를 조정하거나, 컴포넌트에서 필요한 data들을 제공하기도 한다

따라서 대략적인 형식은 이렇다.

<script>
import axios from "axios";

export default {
  ...
}
</script>

잘 생각해보면 script에서는 객체 하나를 export하고 있다.
이 객체 안에 property로 들어갈(...에 들어갈) 목록과 그 역할을 알아보자

data

vue component에서는 무언가를 return하는 함수를 넣어줘야 한다. 이런 식이다.
만약 Vue 객체의 인스턴스를 선언한다면, 함수 대신 객체를 넣어도 괜찮다.

아래는 예시 코드이다.

<script>
export default {
  data: function() {
    return {
      msg: "Hello World"
    }
  }
}
</script>

이렇게 되면 vue-if나 vue-model 혹은 {{ }}를 사용할 수 있게 된다.

<template>
<div>
  {{ msg }}
</div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: "Hello World"
    }
  }
}
</script>

<template>
<div v-if="show">
  이건 보이지 않아요!
</div>
</template>

<script>
export default {
  data: function() {
    return {
      show: false
    }
  }
}
</script>

디렉티브 사용법은 나중에 따로 다루도록 하겠다!

아 주의할점! data를 함수로 선언해야 할 때 화살표 함수를 사용하면 안된다. this 바인딩이 안되기 때문이다.

여튼 data는 react에서 state와 비슷한 역할을 한다

methods

말 그대로 method들을 정의한다.

<template>
<div>
  <button v-on:click="toggle"> 클릭! </button>
  <div v-if="show">
    이건 보이지 않아요!
  </div>
</div>
</template>

<script>
export default {
  data: function() {
    return {
      show: false
    }
  },
  methods: {
    toggle: function() {
      this.show = !this.show
    }
  }
}
</script>

method 객체에는 함수들이 들어가며, 이 함수들은 다른 method에서 혹은 템플릿에서 사용될 수 있다. method 안에도 화살표 함수를 사용하면 안된다! this를 인식하지 못하는 사태가 벌어진다.

computed

computed는 method와 유사하지만 computed에서 사용하고 있는 data에 변화가 있으면 자동으로 계산되는 함수들의 모음이다.

예시를 통해 살펴보자

<template>
<div>
  <div>
    {{ value }}
  </div>
  <div>
    {{ doubleValue }}
  </div>
  <button v-on:click="plus"> 클릭! </button>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      value: 10
    }
  },
  methods: {
    plus: function() {
      this.value ++
    }
  },
  computed: {
    doubleValue: function() {
      return this.value * 2
    }
  }
}
</script>

클릭을 할 때마다 value가 1씩 증가하고 (위 div), value가 바뀌기 때문에 doubleValue에 의해 아래 div가 2씩 증가하게 된다.

computed 역시 마찬가지로 화살표 함수를 사용하면 안된다.

computed는 methods와 달리 캐싱이라는 개념이 있어, 같은 페이지 내에서 같은 연산을 여러번 해야 한다면 성능면에서 효율적으로 사용할 수 있다

watch

watch는 computed와 비슷하지만 많은 옵션이 존재한다. 데이터 변경의 응답으로 비동기식 계산이 필요한 경우나 시간이 많이 소요되는 계산을 할 때 watch를 사용하는 편이 좋다고 한다. (이 이유를 알려면 vue 내부 동작에 대한 이해가 필요할 듯 하다)

보다 자세한 내용은 여기서 확인할 수 있다

props / propsData

propsData는 new를 이용한 인스턴스 생성때만 사용되며, 사실상 단위 테스트를 쉽게 하기 위한 용도이다.

props는 react의 props와 유사하다

간단한 예제를 살펴보자

// App.vue

<template>
  <div id="app">
    <hello-world v-bind:num="value">
    </hello-world>
    <button v-on:click="plus"> 클릭! </button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  components: {
    "hello-world": HelloWorld
  },
  data: function() {
    return {
      value: 1
    }
  },
  methods: {
    plus: function() {
      this.value ++;
    }
  }
}
</script>

// HelloWorld.vue
<template>
<div>{{num}}</div>
</template>

<script>
export default {
  props: {
    num: Number
  }
}
</script>

3번째 라인이 prop에 데이터를 넘겨 준 것이다. num이라는 prop에 App.vue가 가지고 있는 value를 준다는 뜻이다.

12번째 라인은 HelloWorld라는 vue 컴포넌트를 import한 것이고,
15~16번째 라인은 import된 컴포넌트를 <hello-world></hello-world>로 사용하겠다는 뜻이다.

마무리

오늘 다루었던 data, methods, computed, watch, props / propsData 외에도 DOM에 관련된 property, 라이프사이클에 관련된 property 등등이 추가로 있다.

API 도큐 에서 더 많은 property를 확인할 수 있다.

vue를 3~4시간 정도 사용해보고 작성한 글입니다. 틀린 내용은 언제든지 지적해주시면 감사드리겠습니다 :)