[Vue.js] 컴포넌트(component)

chael_lo·2022년 4월 25일

JavaScript vue.js

Vue.js

목록 보기

7/8

뷰는 전역 컴포넌트와 지역 컴포넌트를 만들어 사용할 수 있다.
(부모 인스턴스와 자식 인스턴스의 개념)

컴포넌트란?

하나의 컴포넌트는 vue라는 확장자를 가지며, 컴포넌트는 Dom의 작은 범위라고 생각하면 된다. view, 데이터 처리를 한 파일에서 할 수 있다.

컴포넌트 장점

컴포넌트 별로 유효 범위, 생성 주기 등을 관리할 수 있다.
재사용성, 구현 속도, 코드 가독성이 좋다.
양방향 바인딩

컴포넌트 사용해보기

어떤 화면이던 컴포넌트와 컴포넌트이 결합이 계속 이어진다.
하나의 컴포넌트는 해당 컴포넌트의 이벤트, 생명 주기, 관련 메소드를 포함하고 부모 컴포넌트로 데이터를 보내거나 내려받아 사용할 수 있다.
부모 컴포넌트에서 사용하려고 정의해둔 데이터는 자식 컴포넌트에서 사용하려면 연결 해주어야 하며, 자식 컴포넌트에서 사용한 데이터를 부모 컴포넌트에서 받아오려면 연결 해주어야 한다.
이런 연결 작업이 끝나면 vue에서 이벤트 처리에 따른 데이터 체크를 자동으로 해준다.
컴포넌트를 내가 등록한 이름으로 개발 툴에서 확인이 가능하기 때문에 좋고 이벤트마다 체크를 잘 해준다.

app.vue

예시) 컴포넌트: search-form
template 안에 사용할 컴포넌트를 등록해준다.
search-form에서 사용할 value라는 데이터와 부모 컴포넌트에서 사용하는 query라는 데이터를 연결하여 준다. 메서드도 마찬가지로 연결하여 준다.

value ---> query
@submit ---> onSubmit
@reset ---> onReset

<template>
  <search-form v-bind:value="query" v-on:@submit="onSubmit" 
        v-on:@reset="onReset"></search-form>
</template>

script 부분에서 search-form을 import 해주고, components 아래에 사용할 이름으로 추가하여 준다.

<script>
  import FormComponent from './components/FormComponent.vue'
  
  export default {
   name: 'app',
   data () {//사용할 data 정의
      return {
      query: '',//예시에 나왔던 query라는 data
      submitted: false,
      tabs: ['추천 검색어', '최근 검색어'],
      selectedTab: '',
      keywords: [],
      history: [],
      searchResult: []
      }
    },
    components: {//search-form을 컴포넌트로 등록
      'search-form': FormComponent,   
    },
    created() {//생성주기 관리
      this.selectedTab = this.tabs[0]
      this.fetchKeyword()
      this.fetchHistory()
    },
  }
</script>

FormComponent.vue

props를 이용해 부모 컴포넌트(부모 인스턴스)와 데이터 연결을 한다.
watch는 view 모델 감시하고 있다가 감시하던 값이 변경되면 아래 함수 실행한다.

<template>
  <form v-on:submit.prevent="onSubmit">
    <input type="text" v-model="inputValue" v-on:keyup="onKeyup" placeholder="검색어를 입력하세요" autofocus>
    <button v-show="inputValue.length" v-on:click="onReset" type="reset" class="btn-reset"></button>
  </form>  
</template>

<script>
export default {
  props: ['value'],//props를 이용해 부모 컴포넌트(부모 인스턴스)와 데이터 연결
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {//view 모델 감시하고 있다가 감시하던 값이 변경되면 아래 함수 실행
    value(newVal, oldVal) {
      this.inputValue = newVal
    }
  },
  methods: {
    onSubmit() {//데이터를 받을 경우 app.js에서 @submit이 실행 후 onSubmit 이벤트가 발생
      this.$emit('@submit', this.inputValue.trim())
    },
    onKeyup() {
      if (!this.inputValue.length) this.onReset()
    },
    onReset() {
      this.inputValue = ''
      this.$emit('@reset')
    }
  }
}
</script>