프로그래머스 데브코스 TIL - Day 35

 

✅ 오늘의 학습

📌 Vue (2)

 

- computed / watch

- 클래스

- 스타일 바인딩

 

 

---

computed

함수가 아닌 데이터로 취급을 하게되고 그 값을 기억을 하게 됨으로써

연산 작업을 반복적으로 하지 않는다.

computed: {
  doubleAge() {
    return this.user.age * 2;
  },
},

 

* 계산된 데이터가 의존하고 있는 데이터가 바뀔 때마다 다시 연산을 한다.

* 계산된 데이터를 직접적으로 변경하려고 하면 그 값이 변경되지 않는다. (getter, setter를 통해 변경 가능)

 

 

computed 활용

json으로 받은 데이터를 가공할 때 json으로 받은 값을 직접 변경하지 않고

새로운 데이터를 만들어서 반환할 수 있다.

 

이때, 데이터가 캐싱되어 있기 때문에 한번 연산이 되면

내부의 값이 변경되지 않는 이상 이후 호출 시 추가적인 연산을 하지 않는다.

 

<div id="app">
  <ul>
    <li v-for="todo in upperTodos">{{ todo.title }}</li>
  </ul>
</div>
<script>
  const App = {
    data() {
      return {
        todos: [],
      };
    },
    computed: {
      upperTodos() { 
        return this.todos.map((todo) => ({
          ...todo,
          title: todo.title.toUpperCase(),
          // todo data의 title을 대문자로 변경
        }));
      },
    },
    created() {
      fetch("https://jsonplaceholder.typicode.com/todos")
        .then((res) => res.json())
        .then((res) => {
          console.log(res);
          this.todos = res;
          // title, id
        });
    },
  };

 

 

 

computed / get, set 사용하기

 

계산된 데이터를 직접적으로 변경하려고 하면 그 값이 변경되지 않는데,
필요에 의해 값을 변경해야 할 경우 getter, setter를 사용하여 변경을 한다.

 

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

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

vm.fullName = "Hey Hoon";

 

Watch

watch 옵션에 작성한 반응형 데이터가 바뀌면 watch 내에 작성한 코드가 실행된다.

해당되는 데이터의 첫번째 인자로는 바뀐 value를 받을 수 있고

두 번째 인자로는 이전의 value를 받을 수 있다.

watch: {
  firstName(newValue, oldValue) {
    console.log(newValue, oldValue);
  },
},

* watch하는 데이터가 참조형의 경우 내부의 참조값이 변경된다면 감지하지 못한다.

 

💡 deep 옵션

deep옵션을 사용하여 내부의 참조값의 변경 여부를 감시할 수 있다.

watch: {
  user: {
    handler(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
    deep: true,
  },
},

 

💡 immediate 옵션

해당 데이터가 초기화가 되었을 때 바로 실행이 되게 설정할 수 있다.

watch: {
  user: {
    handler(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
    deep: true,
    immediate: true
  },
},

 

---

데이터를 기반으로 다중 클래스 추가

 

객체 리터럴 방식

여러개의 데이터를 연결하여 클래스를 지정하려면 key/value형태로 작성한다.

*key와 value의 값이 같다면 key값으로만 작성할 수 있다.

 

<div id="app">
  <h1 :class="{ active: isActive, small: isSmall }" class="title">{{ name }}</h1>
</div>

const App = {
    data() {
      return {
        name: "Jay",
        isActive: false,
        isSmall: true,
      };
    },
  };

 

❗❗ class의 속성에 특수문자가 있다면 작은 따옴표로 묶어서 작성해주어야 한다.

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

 

💡 class을 object로 관리하기

computed를 사용하여 계산된 값을 만들어서 class에 연결시킬 수 있다.

 <div id="app">
  <h1 :class="classObject" class="title">{{ name }}</h1>
</div>
<script>
  const App = {
    data() {
      return {
        name: "Jay",
        active: true,
        small: true,
      };
    },
    computed: {
      classObject() {
        return {
          active: this.active,
          "title--small title--orange": this.small,
        };
      },
    },
  };

 

 

배열 리터럴 방식

배열 리터럴로 클래스를 넣어 동적으로 클래스를 변경해 줄 수 있다.

<div id="app">
  <h1 @click="changeTitle" :class="[active, title]">{{ name }}</h1>
</div>

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

 

 

inline style 속성을 object로 관리하기

<div id="app">
  <h1 @click="increaseWidth" :style="styleObject">{{ name }}</h1>
</div>
<script>
  const App = {
    data() {
      return {
        name: "Jay",
        backgroundColor: "red",
        width: 200,
      };
    },
    computed: {
      styleObject() {
        return {
          backgroundColor: this.backgroundColor,
          width: this.width + "px",
        };
      },
    },
    methods: {
      increaseWidth() {
        this.width += 10;
      },
    },
  };

style 속성은 케밥케이스로 작성을 해야 하지만

카멜케이스로 작성을 해도 VueJS가 자동으로 변환해준다.

 

---

✍ 느낀 점

 

문법들을 잘 익히면 간편하게 사용할 수 있을 것 같다.

코드들이나 제공하는 기능들이 직관적이고 이해하기가 쉽다는 생각이 들었다.

아직 예제만 보고 간단하게 따라하는 정도지만 규모 있는 앱을 만들 때

리액트와 다르게 또 어떠한 장점이 있을 지 궁금하다!