뷰 상태 (Vue State)

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다.

Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다.

 

---

뷰 상태 (Vue State)

뷰 인스턴스 내부에 지정되는 상태 옵션 API로 뷰 개발하면서 자주 사용되는 속성들입니다.

 

data

컴포넌트 인스턴스의 초기 반응형 상태를 반환하는 함수로 일반적으로 코딩시 사용하는 변수를 선언하는 곳입니다.

이 곳에서 선언된 객체(반응형 데이터 객체)는 'this.$data'로 접근할 수 있으며, 'this.$data.a'는 $data를 생략하여 'this.a'와 동일합니다. 

 

형식

...
<script>
export default {
	data() {
    	return { a: 1 }
    },
    created() {
    	console.log(this.a); // 1
        console.log(this.$data); // {a: 1}
    }
}
</script>
...

---

 

props

상위 컴포넌트(부모)에서 하위 컴포넌트(자식)으로 데이터를 전달할 때 사용하는 함수입니다.

추가적으로 지정할 수 있는 세부 옵션은 총 4가지가 있습니다.

• type: props 속성에 선언된 데이터의 형태를 선언하는 옵션
• default: 부모 객체로 부터 전달받지 않거나 undefined 값인 경우 prop에 지정할 기본 값을 선언하는 옵션
• required: prop 속성이 필수인지 여부를 정의하는 옵션
• validator: prop 값을 유일한 인자로 사용하는 커스텀 유효성 검사 옵션

 

형식

...
<script>
export default {
  props: {
    // 타입 체크
    height: Number,
    // 타입 체크 및 유효성 검사
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: (value) => {
        return value >= 0
      }
    }
  }
}
</script>
...

---

 

emit

하위 컴포넌트에서 상위 컴포넌트로 이벤트 시그널을 보낼 수 있도록 정의하는 함수입니다.

 

형식

...
<script>
export default {
    ...
//////////////////////////////////////////////////////
// CASE 1: 배열 문법
//////////////////////////////////////////////////////    
    emits: ['check'],    // ★ 참조: 배열
    created() {
        this.$emit('check');
    }
    ...
//////////////////////////////////////////////////////
// CASE 2: 객체 문법
//////////////////////////////////////////////////////
   emits: {    // ★ 참조: 객체
    // 유효성 검사 없음
    click: null,

    // 유효성 검사 사용
    submit: (payload) => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`잘못된 정보 제출 이벤트!`)
        return false
      }
    }
  }   
}
</script>
...

 

methods

컴포넌트 인스턴스에서 사용할 메서드를 선언하는 함수입니다. 

 

형식

...
<script>
export default {
...
  methods: {
    clickBtn() {
      alert('click!')
    }
  }
  ...
}
</script>
...

---

 

watch

데이터 변화를 감지하여 자동으로 특정 로직을 수행하게 하는 함수입니다.

데이터 호출과 같이 시간이 상대적으로 많이 소요되는 비동기 처리에 적합한 함수입니다.

 

형식

<template>
    <div>
        <input v-model="message">
    </div>
</template>

<script>
export default {
...
  data: {
      message: 'hello world!'
  },
  watch: {
    message: function(data) {
      console.log("변경된 data의 값: ", data);
    }
  }
...
}
</script>
...

---

 

computed

데이터를 가공하는 등의 복잡한 연산(즉, 데이터 연산)을 HTML 태그 대신 수행하는 함수입니다.

 

형식

...
<script>
export default {
    new Vue({
        data: {
            message: 'hello world'
        },
        computed: {
            reversedMsg: function () {
                return this.message.reverse();
            }
        }
    });
}
</script>
...

 

차이점

요약

	methods	computed	watch
호출 시기	사용자 직접 호출	데이터 변경 감지	데이터 변경 감지
데이터 자동 갱신	X	O	O
캐싱 기능 제공	X	O	X
콜백 기능 제공	X	X	O
사용 목적	반복, 복잡함이 없는 연산 처리	내장 API를 이용한 간단한 연산 처리	콜백 기능을 이용한 비동기 처리

 

상세 설명

1. computed vs methods

두 함수는 특정 로직/연산을 수행한다는 공통점이 있으나 자동 혹은 수동으로 데이터를 갱신하는 경우가 다르다는 점이 가장 큰 차이점입니다.

• methods
  • 호출할 때만 로직이 수행됨 (→ 데이터 수동 갱신)
  • 수행할 때마다 로직을 수행하므로 연산 결과 값을 가지고(캐싱하고) 있지 않음
  • 성능 측면에서 복잡하지 않고 반복적 수행이 없는 화면에서 사용하는 것이 효율적
• computed
  • 대상 데이터의 값이 변경되면 자동으로 로직이 수행됨 (→ 데이터 능동 갱신)
  • 데이터가 변경되지 않는 한 연ㅅ안 결과 값을 가지고(캐싱하고) 있다가 호출시 해당 값을 반환
  • 성능 측면에서 복잡한 연산, 반복적 수행하는 화면에서 사용하는 것이 효율적

 

2. computed vs watch

두 함수는 데이터를 관찰하고 있다가 자동으로 로직을 수행한다는 공통점이 있으나 콜백함수 기능 여부가 가장 큰 차이점입니다.

• computed: 내장 API를 활용한 간단한 연산 처리
• watch: 비동기 처리 (상대적으로 computed보다 시간이 더 소요되는 호출 처리)

 

 

---

References

• Do it! Vue.js 입문: https://search.shopping.naver.com/book/catalog/32489500759?cat_id=50010881&frm=PBOKPRO&query=do+it%21+vue&NaPm=ct%3Dlaapzz40%7Cci%3D7954ed9cc7559ee7393564e5030b0438bd5c1fcd%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3Df6d2ac807b583005130cba7e92538e147334e7bd

Do it! Vue.js 입문 : 네이버 도서

• Simplevue: https://simplevue.gitbook.io/intro/vue.js

Vue.js 란 ? - simpleVue

• Vue3 공식 문서: https://vuejs.org/api/

API Reference | Vue.js