[DAY-34] Vue (1)

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

오늘의 소감은?
토이 프로젝트 때 처음 만났던 Vue..
데브 코스가 바빠 잊고 살았는데 다시 만나게 될 줄은 몰랐어요.

잊고 산 만큼..다 까먹었더라고요...
우리 다시 시작하자

[1] VueJS

Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프래임워크입니다.

[2] 선언적 렌더링(Declarative Rendering)

선언적 렌더링은 Vue의 중요한 특징입니다.

간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링할 수 있습니다.

<div id="counter">Counter: {{ counter }}</div>

const Counter = {
  data() {
    return {
      counter: 0,
    }; // 이중 중괄호 구문
  },
};

Vue.createApp(Counter).mount("#counter");

counter 데이터와 html DOM이 연결되었으며, 이를 반응형(reactive)이 되었다고 말할 수 있습니다.

만약 counter 데이터가 매 초마다 증가하고 html DOM이 변경될 때 어떻게 렌더링될까요?

const Counter = {
  data() {
    return {
      counter: 0,
    }; // 이중 중괄호 구문
  },
  mounted() {
    setInterval(() => {
      this.counter++;
    }, 1000);
  },
};

Vue.createApp(Counter).mount("#counter");

이미 해당 데이터는 html DOM과 연결되었습니다.

따라서 데이터가 변경될 시, html 이중 중괄호 구문 내의 변수의 값도 변경되어 렌더링되는 것을 확인할 수 있습니다.

계속해서 증가합니다.

• setInterval Func

이때, setInterval 함수는 화살표 함수로 작성되어야 합니다.

일반 함수에서의 this는 함수가 실행(호출)되는 위치에서 정의가 됩니다.

setInterval(function () {
  this.counter += 1;
  // 여기서 사용하는 this는 function 내부에서 정의되므로, 외부의 값을 참조할 수 없습니다.
}, 1000);

화살표 함수의 경우 함수가 선언되는 위치에서 정의가 되기 때문에, 함수 내부가 아닌 선언되는 위치에 있는 값을 참조할 수 있습니다.

setInterval(() => {
  this.counter++;
}, 1000);

• component

component는 데이터의 캡슐화를 지원합니다. (하단의 파트에서 더 다루도록 하겠습니다. )

또한 v-for을 사용하여 반복 출력을 할 수 있습니다.

<!-- 3. 카멜 케이스 -> 케밥 케이스로 바꾸어 작성  -->
<!-- 4. 사용할 컴포넌트 네이밍으로 태그 생성  -->
<!-- 5. 사용할 컴포넌트 내부의 데이터 프롭스에 들어갈 값 정의  -->
<fruit-item fruit-name="Orange"></fruit-item>

// 1. component로 사용할 객체 타입 정의
const FruitItem = {
  template: "<li>{{ fruitName }}</li>",
  props: ["fruitName"],
};
// 2. components 안에서 해당 데이터 사용할 것 명시
const App = {
  components: {
    FruitItem,
  },
  data() {
    return {
      fruits: ["Apple", "Banana", "Cherry"],
    };
  },
};

fruit-name 프롭스 값으로 전달된 orange 문자열이 해당 컴포넌트의 template에 적용되어 렌더링 된 것을 확인할 수 있습니다.

그렇다면 v-for을 사용하여 fruits 데이터를 넣어보도록 하겠습니다.

<fruit-item v-for="f in fruits" v-bind:fruit-name="f"></fruit-item>

이때 v-for로 순회된 데이터 f를 사용할 땐 v-bind 디렉티브를 붙여줘야 사용할 수 있습니다.

따라서 디렉티브를 사용함으로써, JS 구문과 DOM 요소들의 상호작용을 만들 수 있습니다.

[2-2] Component

Component란 미리 정의된 옵션을 가진 Vue 인스턴스를 말합니다.

컴포넌트 시스템은 Vue의 중요한 개념입니다.

데이터의 캡슐화를 지원하며, 재사용할 수 있는 작은 단위로 만들 수 있기 때문에

대규모 어플리케이션을 구축할 수 있게 해주는 추상적 개념입니다.

전역, 지역 선언 방법은 컴포넌트 선언 방법 파트에서 다룹니다.

[3] 라이프 사이클

각 컴포넌트는 생성될 때 일련의 초기화 과정을 거칩니다.

(데이터 관찰, 템플릿 컴파일, 인스턴스 DOM 마운트(연결), 데이터 변경 시 DOM 업데이트)

이 과정에서 라이프사이클 훅 함수를 실행할 수 있습니다.

[3-1] 라이프사이클 다이어그램

beforeCreate() {
  // 만들어지기 전
  console.log("before Create!", this.msg);
  console.log(document.querySelector("h1"));
},
created() {
  // 만들어진 직후
  console.log("created!", this.msg);
  console.log(document.querySelector("h1"));
},
beforeMount() {
  // DOM element 연결되기 직전
  console.log("before Mount!", this.msg);
  console.log(document.querySelector("h1"));
},
mounted() {
  // DOM element 연결된 직후
  console.log("mounted!", this.msg);
  console.log(document.querySelector("h1"));
},
beforeUpdate() {
  // 데이터가 변경된 후 렌더링도 업데이트 되기 전
  console.log("before update!", this.msg);
  console.log(document.querySelector("h1").textContent);
},
updated() {
  // 데이터와 렌더링 모두 변경사항이 반영된 직후
  console.log("updated!", this.msg);
  console.log(document.querySelector("h1").textContent);
},
beforeUnmount() {
  // DOM element와 연결이 끊기기 직전
  console.log("before unmount");
},
unmounted() {
  // DOM element와 연결이 끊어진 후
  console.log("unmounted!");
},

[4] 템플릿 문법

[4-1] 보간법 (Interpolation)

이중 중괄호 구문(Mustache) 기법을 사용한 문자열 보간법을 사용할 수 있습니다.

<p>메세지: {{ message }}</p>

해당 이중 중괄호 구문은 컴포넌트 인스턴스의 message 속성 값으로 대체되며, 속성 값이 변경될때마다 갱신됩니다.

해당 이중 중괄호 구문 내에서는 간단한 JavaScript 표현식을 지원합니다.

단, 단일 표현식만 지원합니다.

<h1 v-bind:class="name">{{ name + '입니다' }}</h1>
<h1>{{ count + 100 }}</h1>

• v-once

이때 v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신하지 않는 일회성 보간을 작성할 수 있습니다.

<p v-once>{{ message }}</p>

• v-html

만약 이중 중괄호 구문 안에 html을 출력하고 싶다면 v-html 디렉티브를 사용하여 출력할 수 있습니다.

<div id="app">
  <h1 v-html="msg">{{ msg }}</h1>
</div>

const App = {
  data() {
    return {
      msg: "<p style='color:red'>hello Vue!</p>",
    };
  },
};

Vue.createApp(App).mount("#app");

html 코드가 잘 적용된 것을 확인할 수 있습니다.

하지만 임의의 HTML을 동적으로 렌더링 할 경우, XSS의 위험이 있으므로 주의해서 사용해야합니다.

[4-2] 디렉티브

디렉티브는 Vue에서 제공하는 특수 속성들입니다.

이 속성들은 v-접두어가 붙어있으며, 렌더링 된 DOM이 반응형 동작을 하도록 도와줍니다.

‼ 간단한 디렉티브들만 다룬 후, 각 자세한 내용은 후에 다룹니다.

[1] v-bind

JavaScript의 객체를 속성의 값으로 넣고 싶을 때, v-bind 디렉티브를 사용할 수 있습니다.

<div v-bind:class="{ orange: active }">{{ counter }}</div>

해당 디렉티브를 사용하면 속성 값으로 넣은 JS 데이터 형태가 하나의 속성 값으로 읽힐 수 있습니다.

또한 내부에서 data()에 정의해놓은 값들과 연결해서 사용할 수 있습니다.

해당 디렉티브는 약어로 작성할 수 있습니다.

<a v-bind:href="url"> ... </a>
<a :href="url"> ... </a>

<a : [key]="url"> ... </a>
<!-- 동적 전달인자와 함께 쓴 약어 -->

[2] v-on

v-on 디렉티브를 사용하여 html에서 이벤트 헨들러를 추가할 수 있습니다.

<button v-on:click="increase">Click me!</button>

const App = {
  data() {
    return {
      counter: 0,
      active: false,
    };
  },
  methods: {
    increase() {
      this.counter += 1;
    },
  },
};

해당 디렉티브는 약어로 작성할 수 있습니다.

<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>

<a @[event]="doSomething"> ... </a>
<!-- 동적 전달인자와 함께 쓴 약어 -->

[3] v-if

v-if 디렉티브를 통하여 마치 속성을 작성하듯이 렌더링 여부를 결정해주는 데이터를 정의할 수 있습니다.

<div v-if="active">Hello Vue!</div>

const App = {
  data() {
    return {
      active: false,
    };
  },
  methods: {
    toggle() {
      this.active = !this.active;
    },
  },
};

toggle 이벤트가 발생하여 active 값이 변함에 따라 위의 div 렌더링 여부가 결정됩니다.

[4] v-for

v-for 디렉티브를 통하여 JS의 이터러블 데이터를 순회할 수 있습니다.

<div id="app">
  <ul>
    <li v-for="f in fruits">{{f}}</li>
    <!-- f는 일종의 매개변수입니다. -->
  </ul>
</div>

const App = {
  data() {
    return {
      fruits: ["Apple", "Banana", "Cherry"],
    };
  },
};

Vue.createApp(App).mount("#app");

fruits data가 순회되어 li에 입력된 것을 확인할 수 있습니다.

[5] 동적 데이터

디렉티브의 속성 이름도 동적으로 작성할 수 있습니다.

<h1 v-bind:[attr]="'active'">Hello vue!</h1>

const App = {
  data() {
    return {
      attr: "class",
    };
  },
};
const vm = Vue.createApp(App).mount("#app");

[5] Data & Methods

[5-1] Data

Vue에서 동적 데이터에 접근할때는 $data라는 내장 객체에 접근해서 확인할 수 있습니다.

vm.$data.count; // 7
vm.count; // 7

일반적으로 $data를 이용해서 접근하는 것이 권장됩니다.

[5-2] Proxy

Proxy 객체는 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 새로운 행동을 정의할 때 사용합니다.

new Proxy(target, handler);
// target : 감시할 데이터
// handler : getter, setter을 가지며, 데이터를 가져오고 조작한 후 반환할 수 있습니다.

Proxy는 데이터의 변경을 감지해서 화면에 출력하는 로직까지 담당합니다.

따라서 새로운 Proxy를 선언한 후 원하는 로직을 입력하여 렌더링까지의 과정에 개입할 수 있습니다.

[5-3] Methods

컴포넌트 인스턴스에 함수를 추가하기 위해 methods를 사용할 수 있습니다.

const App = {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increase() {
      this.count += 1; // this값은 자동으로 바인딩됩니다.
    },
  },
};

methods를 선언할 때, 화살표 함수를 사용하면 Vue가 적절한 this값을 바인딩하지 못합니다.

따라서 화살표 함수를 사용하지 않도록 합니다.

methods는 일반적으로 템플릿 내부에서 이벤트 리스너로 활용됩니다.

<button @click="increase">count ++</button>
<!-- v-on의 약어는 @ 입니다. -->

---

출처

프로그래머스

Vue.js3 Document

Proxy MDN Document