Untitled

πŸ˜‰ ν—·κ°ˆλ Έλ˜ & λͺ°λžλ˜ λΆ€λΆ„λ“€λ§Œ μ •λ¦¬ν•˜λŠ” λ‚˜λ§Œμ˜ 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");

Untitled 1

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");

Untitled 2

μ˜μ‘΄ν•˜λŠ” 값을 λ°”κΏ€ λ•Œ λ§ˆλ‹€, 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];
    },
  },
},

Untitled 3

값을 μ–»μ–΄λ‚΄λŠ” getter, μ§€μ •ν•΄μ£ΌλŠ” setterκ°€ 잘 λ™μž‘ν•¨μ„ μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€.




[2] watch

watchλŠ” λ°˜μ‘ν˜• 데이터λ₯Ό κ°μ‹œν•˜μ—¬ λ‚΄λΆ€ ν•¨μˆ˜λ₯Ό λ™μž‘μ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€.

데이터가 변경될 λ•Œ λ§ˆλ‹€ ν•„μš”ν•œ λ‘œμ§μ„ μˆ˜ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

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

Untitled 4

ν•΄λ‹Ή 데이터가 λ³€κ²½λ λ•Œλ§ˆλ‹€ λ‚΄λΆ€ ν•¨μˆ˜μ˜ 둜직이 잘 λ™μž‘ν•¨μ„ μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€.


λ˜ν•œ ν•¨μˆ˜μ— λ§€κ°œλ³€μˆ˜λ₯Ό λ°›μ•„ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

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",
      },
    };
  },
};





좜처

ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€

μΉ΄ν…Œκ³ λ¦¬: ,

μ—…λ°μ΄νŠΈ:

λŒ“κΈ€λ‚¨κΈ°κΈ°