원쌤의 Vue.js 퀵스타트 책을 보았다(Vue3)_3

 

주 단위로 Vue 스터디를 진행했던 내용들을 그냥 개인적으로 정리하기 위해서 작성중인 글이다.

4장에 중요포인트는 실질적으로 주로 사용되는 data나 여러가지 기능을 제공하는 computed method watch등을 소개하고 사용방법을 알려주는 것인듯 하다.

 

data옵션에 대해서 설명한다.

컴포넌트가 관리하고 추적해야 할 데이터를 등록하여 사용 한다.

리액트에서도 주로 재사용되는 단위를 컴포넌트라고 했었는데 동일한듯 보인다.

Vue에서 제공하는 Data에 접근하거나 Vue Dev Tool 에서 보여지는 대상의 경우 모두 $로 시작한다. (ex $data)

다음과 같이 접근하여 사용가능하기 때문에 내부적으로 사용하는 변수들의 경우 $가 붙으면 안된다.

        data() {
          return { $name: "" };
        },

<div id="app">
      <input id="a" type="text" v-model="name" />
      <br />
      입력하신 이름 : <span>{{name}}</span>
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      var vm = Vue.createApp({
        name: "App",
        data() {
          return { name: "" };
        },
      }).mount("#app");
    </script>

//콘솔입력내용
vm.$data.name="abc"

 

 

Computed에 별도의 메서드를 등록하면 캐싱처리가 된다.

다음과 같이 num을 data에서 Proxy로 변경을 감지하고, 메서드에서 변경되었을때 sum() 과 매칭되는 sum의 값이 변경되는데 이 경우 캐싱으로인해 1회만 동작한다.(불필요한 동작 X)

<div id="app">
      1보다 큰수 : <input id="a" type="text" v-model.number="num" />
      <br />
      1부터 입력한 값까지의 합 : <span>{{sum}}</span><br />
      1부터 입력한 값까지의 합 : <span>{{sum}}</span><br />
      1부터 입력한 값까지의 합 : <span>{{sum}}</span><br />
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      var vm = Vue.createApp({
        name: "App",
        data() {
          return { num: 0 };
        },
        computed: {
          sum() {
            console.log("## num : " + this.num);
            var n = parseInt(this.num);
            if (Number.isNaN(n)) return 0;
            return (n * (n + 1)) / 2;
          },
        },
      }).mount("#app");

get, set 형태로도 사용가능

<div id="app">
      <input type="text" v-model.number="amt" /><br />
      금액 : <span>{{amount}}원</span>
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      var vm = Vue.createApp({
        name: "App",
        data() {
          return { amt: 99999 };
        },
        computed: {
          amount: {
            get() {
              var regexp = /\B(?=(\d{3})+(?!\d))/g;
              return this.amt.toString().replace(regexp, ",");
            },
            set(amount) {
              var amt = parseInt(amount.replace(/,/g, ""));
              this.amt = Number.isNaN(amt) ? 0 : amt;
            },
          },
        },
      }).mount("#app");
    </script>

• 기타 주의사항

위와 같이 전통적인 함수가 아니라 화살표 함수로 표현하게 되면 this 인 부분이 전역으로 가르키게 되기때문에 조심해야한다.

computed: {
          sum : (vm) => {
            console.log("## num : " + vm.num);
            var n = parseInt(vm.num);
            if (Number.isNaN(n)) return 0;
            return (n * (n + 1)) / 2;
          },
        },
      }).mount("#app");

각각 속성에 등록이 가능하다.

methods

computed

watch

3개의 기능에 대해서 차이점 및 장단점 정리가 필요하다.

참고주소

Vue - method computed watch 비교

Vue - method computed watch 비교

 

Method

method 속성 함수는 심플하게 그냥 함수를 단순히 정의한 것이다.

대신 App함수가 재호출(랜더링, 데이터변경)이 될 때마다 함수가 다시 등록되고 수행된다.(성능문제 야기 할 수 있음.)

그래서 나온게 computed 함수

computed 문법의 특이사항 (method와의 차이점)

• template에서 호출시 ()를 적지 않아야 된다.
• 파라메터를 직접 넣을 수 없다.
• getter computed 함수는 return 값이 반드시 존재해야 한다.

computed의 경우

함수를 실행한 결과 값을 캐싱하여 저장한다. 구독하는 data가 변경이 없으면 App 컴포넌트가 재호출(= 리랜더링, = 데이터변경) 되어도 함수를 다시 등록하지 않는다.

Watch

computed와 마찬가지로 특정한 데이터를 구독하고 있다. 구독하고 있는 data가 업데이트 될 때에 등록한 함수가 콜백 함수로서 실행된다.

업데이트된 값이 첫번째 인수로 들어오고 업데이트 전 값이 두번째 인수로 들어온다.

data가 변경될 때 다른 작업을 실행하는 로직 만 있고 return 값이 필요 없을 때 쓰기 좋다.

method computed watch 비교

❓ 컴포넌트가 리랜더링 될 때마다 함수가 등록되는가?

method O / computed X / watch O

❓ 특정한 값 data가 변환되는것을 감지 하는가?

method X / computed O / watch O

❓ 함수를 이벤트 함수 자리에 등록할 수 있는가?

method O / computed X / watch X

method만 뷰에서 기능을 제공해주는게 따로 없는 일반적으로 정의된 함수이기 때문에 가능하다. computed watch는 각자의 쓰여야 할 위치와 문법이 따로 있다.

• 기타 정리

각각 장단점이 다르다. 그러나 계산된 속성(computed)의 경우 무조건 return값이 있어야 하며 동기 방식으로만 가능하다.(비동기X)

비동기로 프로세스가 흐르길 원한다면 관찰속성(watch)를 사용해야 한다.

만약 computed에 axios로 비동기 호출 후 응답받아 값을 return 할 수도 있지만 이 경우 호출 후 대기시간이 길어지면 그 시간 동안 기다려야 한다.

생명주기

실전 프로젝트를 진행 할 때는 생명주기에 대해서 반드시 이해하고 있어야 한다.

주로 사용되는 컴포넌트의 생명주기는 다음과 같음.

mounted 화면 초기화와 관련된 작업.

created 화면과 관련되지 않은 외부 리소스 연결, 이벤트 초기화

updated 데이터나 속성이 변경되어 리렌더링이 일어난 이후 DOM조작 작업

unmounted는 created나 mounted에서 초기화 된 외부리소스의 연결과 같은 객체를 해제할 때 사용.

대략적인 모습

 

생명주기 확인을 위한코드

<div id="app">
      1보다 큰수 : <input id="a" type="text" v-model.number="num" />
      <br />
      1부터 입력한 값까지의 합 : <span>{{sum}}</span><br />
      1부터 입력한 값까지의 합 : <span>{{sum}}</span><br />
      1부터 입력한 값까지의 합 : <span>{{sum}}</span><br />
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      var vm = Vue.createApp({
        name: "App",
        data() {
          return { num: 0 };
        },
        created() {
          console.log("## created");
        },
        mounted() {
          console.log("## mounted");
        },
        updated() {
          console.log("## updated");
        },
        computed: {
          sum() {
            var n = parseInt(this.num);
            if (Number.isNaN(n)) return 0;
            return (n * (n + 1)) / 2;
          },
        },
      }).mount("#app");
</div>

호출되는 순서