[데브코스] TIL-120 Vue, Computed, Watch, 클래스, 스타일 바인딩

Computed와 Watch

1. computed

  계산된 데이터를 추가해두는 옵션이다. 아래와 같이 함수가 여러번 실행된다고 했을 때, 이미 계산된 값을 또 계산하는 것은 비효율적일 수 있다.

const App = {
  data() {
    return {
      count: 3,
    };
  },
  methods: {
    double() {
      return this.count * 2;
    },
  },
};

const vm = Vue.createApp(App).mount('#app');

<div id="app">
	<h1>{{ count }}</h1>
	<h1>{{ double() }}</h1>
	<h1>{{ double() }}</h1>
	<h1>{{ double() }}</h1>
</div>

  computed는 계산된 결과를 캐싱하기 때문에 같은 로직을 또 실행하지 않고 저장된 값을 사용하게 된다. 연산을 낭비하지 않는 장점을 가지게 된다.

const App = {
  data() {
    return {
      count: 3,
    };
  },
  computed: {
    double() {
      return this.count * 2;
    },
  },
};

const vm = Vue.createApp(App).mount('#app');

<div id="app">
	<h1>{{ count }}</h1>
	<h1>{{ double }}</h1>
	<h1>{{ double }}</h1>
	<h1>{{ double }}</h1>
</div>

  computed에 함수 대신 객체로도 사용이 가능하다. 객체 내부에 get(), set() 함수를 통해 데이터를 불러오고 변경도 가능하다.

<div id="app">
  <h1>{{ fullName }}</h1>
  <h2>{{ firstName }}</h2>
  <h2>{{ lastName }}</h2>
</div>

const App = {
  data() {
    return {
      firstName: 'Leon',
      lastName: 'Miller',
    };
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(newValue) {
        console.log(newValue);
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length -1];
      },
    },
  },
};

const vm = Vue.createApp(App).mount('#app');

2. watch

  감시하는 데이터가 변경될 때 실행하고 싶은 로직을 작성하는 옵션이다. 감시하고 싶은 데이터를 하나의 함수로 만들어야 하고, 이는 반응형 데이터여야 한다. 함수에 매개변수를 지정할 수 있다. 첫 번째 매개변수는 새로운 값(newValue)이고, 두 번째 매개변수는 기존 값(oldValue)이다.

const App = {
  data() {
    return {
      firstName: 'Leon',
      lastName: 'Miller',
    };
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(newValue) {
        console.log(newValue);
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      },
    },
  },
  watch: {
    firstName(newValue, oldValue) {
      console.log('watch:', newValue, oldValue);
    },
    fullName() {
      console.log('watch:', this.fullName);
    },
  },
};

  객체나 배열 데이터는 더 깊은 데이터를 감시할 수 있도록 아래와 같이 deep이라는 옵션을 활성화시켜준다. watch 내부에 메서드 형태에서 객체 형태로 작성해주면 된다. 그리고 handler() 함수에 데이터 변경 시에 실행시키고 싶은 로직을 작성하면 된다.

const App = {
  data() {
    return {
      user: {
        name: 'Leon',
        age: 22,
      },
    };
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
      },
      deep: true,
    },
  },
};

const vm = Vue.createApp(App).mount('#app');

  원래 watch는 데이터가 변경되는 시점에 실행되는데, 초기값이 들어갈 때도 실행시키고 싶을 때는 immediate 라는 옵션을 활성화 시켜주면 된다.

---

클래스와 스타일 바인딩

1. (v-bind):class=””

  toggle 버튼을 클릭하면 텍스트 색상이 바뀌는 코드를 작성해보자. class로 객체를 넘겨줄 수 있다. 객체의 key, value의 이름이 같으면 key만 작성해도 된다.

<div id="app">
  <button @click="toggle">Toggle</button>
  <h1 :class="{ active: isActive }" class="title">{{ msg }}</h1>
</div>

const App = {
  data() {
    return {
      msg: 'Hello Vue!',
      isActive: false,
    };
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive;
    },
  },
};
const vm = Vue.createApp(App).mount('#app');

  class에 넘겨주는 객체를 따로 정의하여 사용할 수도 있다. 여기서는 계속 반응형 데이터에 따라 class가 추가되었다 사라졌다 하기 때문에 computed 옵션에 classObject라는 이름의 객체를 정의해주었다.

<div id="app">
  <button @click="toggle">Toggle</button>
  <h1 :class="classObject" class="title">{{ msg }}</h1>
</div>

const App = {
  data() {
    return {
      msg: 'Hello Vue!',
      active: false,
      small: true,
    };
  },
  computed: {
    classObject() {
      return {
        active: this.active,
        'title--small color--orange': this.small,
      };
    },
  },
  methods: {
    toggle() {
      this.active = !this.active;
      this.small = !this.small;
    },
  },
};

const vm = Vue.createApp(App).mount('#app');

  객체 뿐만 아니라 배열로도 클래스명을 넘겨줄 수 있다.

<div id="app">
  <h1 :class="['active', 'title']">Hello Vue!</h1>
</div>

  스타일을 객체로 선언하여 속성의 값으로 사용할 수 있다. 작성하는 순서에 따라 중복되는 CSS가 있다면 더 나중 값이 적용되게 된다.

 

오늘을 마무리 하며

 

  오늘은 Vue에서 제공하는 computed 옵션과 watch 옵션을 중점적으로 공부했다. 우선 확실히 느낀점은 간편하다는 점이다. 바닐라 자바스크립트와 비교해보자면 watch 옵션을 대신하기 위해 데이터 변경이 있는경우 이벤트 핸들러를 통해 확인하고 이를 변수에 할당하고 변경된 데이터를 기반으로 다시 함수를 호출하여 전달해야 하며 해당 값에 의해서 렌더링이 필요하다면 렌더링 함수를 별도로 또 호출해주어야 하는 일련의 과정이 필요했다. 하지만 watch 옵션을 통해서 데이터의 변동이 일어나면 실행시킬 코드들을 작성하면 그만이다. 코드가 훨씬 간결해지고 짧아진다는 것을 느낄 수 있었다. computed 옵션의 경우 말 그대로 계산된 데이터를 캐싱해 놓아 이를 재사용한다. 설명만 들어도 성능면에서 엄청난 이점을 가져온다는 것을 느낄 수 있었다. 아직 큰 규모의 프로젝트를 통해서 확인해 보거나 하지는 못해 체감을 할 수는 없지만 우선 동일한 내용의 코드를 재연산하는 수고로움 자체가 없으니 이는 엄청난 도움이 될 것이다. 어느정도 프레임워크나 라이브러리를 사용해야 하는 이유에 대해서 알 것 같다. 간단하게 말하면 편하다. 정해진 규칙만 지켜서 작성하면 되기 때문이다.