[DAY-35] Vue (2)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
SCSS 과제를 미워하고 있어요.
밀린 강의가 무려 이틀치에요..

Vue는 익숙한 듯 아닌 듯 잘 익히고 있답니다!
얼른 프로젝트 진행 해보고 싶어요! (물론 그 전에 밀린 강의를 다 들어야 합니다. ㅠㅠ)

[1] computed

computed는 계산된 데이터를 만들 수 있습니다.

<h1>{{ count }}</h1>
<h2>{{ double }}</h2>
<h2>{{ double }}</h2>
<h2>{{ double }}</h2>
<h2>{{ double }}</h2>

const App = {
  data() {
    return {
      count: 3,
    };
  },
  computed: {
    double() {
      return this.count * 2;
    },
  },
};
const vm = Vue.createApp(App).mount("#app");

Computed 내부의 double 함수는 더 이상 함수가 아닌 데이터로 취급받습니다.

[1-1] 특징

[1] 캐싱

위의 예시를 methods를 사용해서 계산된 값을 출력할 땐, 함수 내부의 로직이 4번 반복됩니다.

하지만 computed는 캐싱 기능이 있으므로, 첫번째 double 데이터를 출력할 때 그 값을 저장합니다.

따라서 로직을 1번만 돌리고도 반복적인 출력이 가능합니다.

[2] 의존성

computed는 계산된 값을 사용하기 위한 내부의 data값에 의존합니다.

const App = {
  data() {
    return {
      user: {
        name: "Jiyoung",
        age: 25,
        email: "haeyum@naver.com",
      },
    };
  },
  computed: {
    doubleAge() {
      console.log("Double Age!");
      return this.user.age * 2; // this.user.age에 의존합니다.
    },
  },
};

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

의존하는 값을 바꿀 때 마다, computed 내부의 해당 데이터의 연산이 다시 일어납니다.

[3] Getter, Setter

값을 얻어낼 때 사용하는 함수가 Getter, 값을 지정할 때 사용하는 함수가 Setter입니다.

computed내부 데이터의 값에 get과 set을 지정할 수 있습니다.

computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(newValue) {
      const names = newValue.split(" ");
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    },
  },
},

값을 얻어내는 getter, 지정해주는 setter가 잘 동작함을 알 수 있습니다.

[2] watch

watch는 반응형 데이터를 감시하여 내부 함수를 동작시킬 수 있습니다.

데이터가 변경될 때 마다 필요한 로직을 수행할 수 있습니다.

watch: {
  firstName() {
    console.log("watch", this.firstName);
  },
  lastName() {
    console.log("watch", this.lastName);
  },
},

해당 데이터가 변경될때마다 내부 함수의 로직이 잘 동작함을 알 수 있습니다.

또한 함수에 매개변수를 받아 사용할 수 있습니다.

watch: {
  firstName(newValue, oldValue) { // 새로 변경된 값, 이전의 값
    console.log("watch", newValue, oldValue);
  },
  lastName(newValue, oldValue) {
    console.log("watch", newValue, oldValue);
  },
},

단 watch 옵션의 내부 함수의 이름은 반응형 데이터여야 합니다.

[2-1] 특징

[1] 참조형 데이터 감시(deep)

watch는 배열, 객체와 같은 참조형 데이터의 감시를 하지 못합니다.

이때, deep 옵션을 사용할 수 있습니다.

watch: {
  user: {
    handler(newVal, oldVal) { // handler 이름은 바꾸면 안됩니다.
      console.log(newVal, oldVal);
    },
    deep: true, // 객체나 배열의 내부까지 더 깊게 감시하겠다는 의미입니다.
  },
},

[2] 즉시실행

지금까지 작성한 watch옵션은 지켜보는 데이터의 변경이 일어났을 때 실행됩니다.

이를 즉시 실행 함수로 만들어 처음부터 실행되게 만들 수 있습니다.

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    deep: true,
    immediate: true, // 처음에 데이터가 초기화되었을 때도 실행
  },
  fruits: {
    handler() {
      console.log(this.fruits);
    },
    deep: true,
    immediate: true,
  },
},

[3] Class 데이터 바인딩

[3-1] 객체 리터럴

html의 class 속성에 데이터를 연결할 때, 객체 리터럴로 적을 수 있습니다.

<h1 :class="{ active: isActive, small: isSmall}" class="title">{{ msg }}</h1>

객체 리터럴로 클래스 이름을 적게 되면, 특정한 데이터들을 기반으로 여러 개의 클래스를 할당하거나 제외할 수 있습니다.

이때, 속성의 이름과 데이터의 이름이 같으면 한쪽을 생략하고 적을 수 있습니다.

<h1 :class="{ active, small }" class="title">{{ msg }}</h1>

const App = {
  data() {
    return {
      msg: "Hello Vue!",
      active: false,
      small: true,
    };
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive;
    },
  },
};

또한 하나의 특정한 데이터 값을 이용해서 여러개의 클래스 값을 지정할 수 있습니다.

<h1 :class="{ active, 'title--small color--orange': small }" class="title">
  {{ msg }}
</h1>

small 데이터 값에 의해 title-small, color-orange 두 개의 클래스 값이 지정될 수 있습니다.

[*] computed

클래스에 지정할 객체 데이터에서 반응형 데이터를 활용해야 한다면 computed를 이용해서 계산된 값을 만들어 사용합니다.

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

...

data() {
  return {
    msg: "Hello Vue!",
    active: false,
    small: true,
  };
},
computed: {
  classObject() {
    // 계산된 데이터를 만듭니다.
    return {
      active: this.active,
      "title--small color--orange": this.small,
    };
  },
},

[3-2] 배열 리터럴

배열 데이터 형식을 사용해서 클래스의 값을 동적으로 바꿔줄 수 있습니다.

<div id="app">
  <h1 @click="changeTitle" :class="[ active, title ]">Hello Vue</h1>
  <!-- 해당 클래스에 active, title이 들어갑니다. -->
  <!-- 클릭할 시 this.title의 값이 'title--large'로 바뀌며 클래스 이름도 변경됩니다. -->
</div>

const App = {
  data() {
    return {
      active: "active",
      title: "title",
    };
  },
  methods: {
    changeTitle() {
      this.title = "title--large";
    },
  },
};

[4] Style 데이터 바인딩

데이터를 동적으로 관리할 경우, inline style 방식이 권장됩니다.

하지만 명시도가 1000점이나 되기 때문에, 평소에 스타일을 작성할 때는 권장되지 않는 방식입니다.

기본적인 작성 페턴은 클래스 바인딩 부분과 동일합니다.

[4-1] 객체 리터럴

<div id="app">
  <h1
    @click="toAqua(); increaseWidth();"
    :style="{ color, width: `${width}px` }"
  >
    <!-- style 속성 내부에 객체 리터럴을 사용합니다. -->
    <!-- click 이벤트 내부에 여러 함수를 지정하기 위해서는 실행의 의미로 ();를 붙입니다. -->
    Hello Vue
  </h1>
</div>

const App = {
  data() {
    return {
      color: "tomato",
      width: 200,
    };
  },
  methods: {
    toAqua() {
      this.color = "aqua";
    },
    increaseWidth() {
      this.width += 10;
    },
  },
};

[*] computed

클래스 데이터 바인딩과 동일하게 객체 리터럴로 계산된 데이터를 작성할 수 있습니다.

<h1 @click="toAqua(); increaseWidth();" :style="styleObject">Hello Vue</h1>

computed: {
  styleObject() {
    return {
      color: this.color,
      width: `${this.width}px`,
    };
  },
},

[4-2] 배열 리터럴

배열 데이터 형식을 사용해서 스타일의 값을 동적으로 바꿔줄 수 있습니다.

<div id="app">
  <h1 :style="[ styleObject, titleStyleObject ]">Hello Vue</h1>
</div>

const App = {
  data() {
    return {
      styleObject: {
        color: "tomato",
        backgroundColor: "aqua",
      },
      titleStyleObject: {
        fontSize: "40px",
        fontWeight: "bold",
      },
    };
  },
};

---

출처

프로그래머스