#TIL_21.09.28

ISOJ·2021년 9월 28일

프로그래머스 데브코스

Vue 시작하기 (1)

Vue.js

사용자 인터페이스를 만들기 위한 프레임워크
반응형: 데이터를 바꾸면 화면도 바뀐다.

선언적 렌더링

data() { return { // data 내용 ... }} 의 형태로 데이터를 정의한다.
디렉티브: vue.js 내에서 사용되는 값이 자바스크립트의 데이터로 읽어올 수 있는 vue 기능
ex) Vue 의 data() 에서 선언한 값을 사용할 수 있게끔 해줌
v-bind,
v-on:event(해당하는 event에 실행될 메소드를 연결 click, scroll, mouseenter ...),
v-if(true/false 로 화면에 렌더링할 여부를 결정할 수 있음)
v-for="item in items"(반복문 사용)
Vue 에서 생성한 컴포넌트는 components 를 통해 등록해야 사용할 수 있음
Vue 에서는 카멜케이스를 사용하지만, html 에서는 대쉬케이스로 사용할 것을 주의
{{}} 와 같이 이중중괄호의 구문의 텍스트 보간으로 출력한다.

애플리케이션과 인스턴스 생성

구조분해 할당을 통해 Vue 에서 개체를 꺼내올 수 있다.
const { createApp } from 'vue'
인스턴스 속성 / 메서드를 사용할 수 있다.

라이프사이클

app = vue.createApp() / app.mount()
init events & lifecycle : 이벤트와 생명주기를 초기화
직후 beforeCreate 라이프사이클 훅 실행
init injections & reactivity : 데이터의 주입과 반응성 판단
직후 created 라이프사이클 훅 실행
template 옵션 존재 여부 확인 (컴포넌트로 해석)
true: 랜더 함수 내에서 컴파일
false: html을 연결해서 출력할 수 있게 컴파일
직후 beforeMount 라이프사이클 훅 실행
준비된 Vue 인스턴스에 자바스크립트 내용을 HTML 과 연결
직후 mounted 라이프사이클 훅 실행
Mounted 이후 Virtual DOM 동작 ... real DOM 과 비교해서 다른 부분만 렌더링하게 해줌
직전 beforeUpdate 라이프사이클 훅 실행
직후 updated 라이프사이클 훅 실행
unmount() 로 연결을 끊어주게 된다면 (반응성이 더이상 동작하지 않는다는 개념으로 이해)
직후 beforeUnmount 라이프사이클 훅 실행
이후 unmounted 라이프사이클 훅 실행
beforeCreate ... this 키워드를 통해 데이터를 다룰 수 없다. (createaApp 을 생성하기 전이기 때문)
created ... html 구조와 연결된 상태는 아니기 때문에 html 을 다루는 작업을 할 수 없음
mounted ... html DOM 과 연결된 직후이기 때문에 구조를 찾아서 해당 데이터를 다룰 수 있다. (다른 라이프사이클에서는 다룰 수 없음. null)
데이터를 업데이트하면 beforeUpdate, updated 라이프사이클이 실행됨
먼저 created 라이프사이클의 처리를 고려한 후, 처리할 수 없다면 mounted 라이프사이클에서 처리하는 방식은 언제 어디서 적절하게 사용할 수 있을지 쉽게 판단할 수 있다.

템플릿 문법

Vue 는 내부적으로 템플릿을 가상 DOM 렌더링 함수로 컴파일함
{{ msg }} ... 문자열 보간
1회성 보간: <span v-once>{{ msg }}</span> 과 같이 v-once 를 사용하면 맨 처음 렌더링이 된 후에는 다시 렌더링이 되지 않는다.
기본적인 이중중괄호는 문자열 텍스트로만 해석되어 출력됨 ... v-html 을 사용하면 태그 / 스타일 등 코드가 적용되어 렌더링됨. 크로스브라우징의 취약점 존재

속성

js 표현식 사용 가능 (삼항 연산자, 메서드 체이닝 등...)
속성에 데이터를 연결할 때 v-bind 디렉티브 작성 필요!
대괄호로 묶어 js 표현식을 디렉티브 전달인자로 사용할 수 있다.

// html ... [] 로 전달하면 값에 소괄호를 묶어 주어야 정삭적인 출력이 됨
<h1 v-bind:[attr]="'active'">Hello Vue!</h1>

// script
data() {
  return {
    attr: 'class'
  }
}

약어: v-vind: ... : 로 생략 가능, v-on: ... @ 로 생략 가능

Data 와 Methods

Data

컴포넌트 ... 재사용성이 핵심요소이므로 데이터를 함수로 만들어 반환해주는 형태를 가져야 함.
항상 Data 는 함수형이여야 하며, return 키워드로 반환되어야 한다. (data를 양쪽 모두 사용할 때 한쪽이 수정되었을 때 다른쪽도 변경되는 에러때문 ... 함수로 선언하고, 함수로 호출해야 한다.)
동적 데이터 접근에는 .$data() 의 내장객체를 통해 접근하는 방법이 권장됨. (데이터가 반응형이라는 것을 명시적으로 나타냄)
반응성을 유지하려면, Data 에 미리 선언해주어야 함.

프록시

기본적인 동작의 새로운 행동을 정의할 때 사용 (값을 조회하거나 할당할 때 get() set() 을 통해 새로운 로직을 추가할 수 있음)
new Proxy(감시할 타겟 객체(app.data), 핸들러(get(), set()))
프록시 생성자의 첫 번째 인자로 타겟 객체를 넘기면, 전달된 데이터의 값을 조회하거나(get()) 지정할 때(set()) 사용
get(target, key) ... 지정한 프로퍼티에 접근 / 조회 하려고 할 때 get 동작
target: 타겟 객체
key: 조회하려는 데이터의 key 값
set(target, key, value) ... 지정한 프로퍼티에 값을 지정하려고 할 때 set 동장
target: 타겟 객체
key: 조회하려는 데이터의 key 값
value: 변경한 데이터의 value 값
get() 에서 return target[key] 를 받고, set() 에서 target[key] = value 로 변경해준다.

Methods

사용할 여러 함수를 정의
this 키워드로 데이터에 접근할 수 있음
메소드를 정의할 때는 기본적으로 화살표 함수를 사용하지 않도록 한다. (this 때문 / 정의 내부에서는 화살표 함수를 사용 가능)

Computed 와 watch

Computed

계산된 데이터 ... 함수가 아닌 Data 로 취급 / 사용 시, 소괄호를 열고 닫는 함수의 실행이 아닌 소괄호 없는 사용
캐시 기능이 있어서 첫 번째 출력의 결과를 기억해 두었다가 동일한 출력 시 반복 출력이더라도 연산을 줄일 수 있음
계산된 데이터는 data() 에 의존(의존성) ... 다시 연산되는 문제를 방지
게터와 세터 사용 가능 (데이터를 함수가 아닌 리터럴로 선언하면 사용 가능 ... 데이터를 접근 / 조회 하기 위해)

watch

반응형 데이터를 감시 ... 반응형 데이터가 바뀌면 watch 에 지정해놓은 함수를 동작시킴
내부 지정된 함수로 들어오는 인자는 일반적으로 newValue, oldValue 의 순서로 들어온다.
data 내부의 속성만 변경하게 되면 watch 가 감시하지 못함
직접적으로 데이터를 바꿔주어야 감지함 ... handler / deep 의 사용으로 해결

ex)
watch: {
  user: {
  	handler(newValue, oldValue) {
    	// ...
    },
    deep: true
  }
}

deep 으로 인해 깊은값을 바꾸어도 감지할 수 있음

immediate: true ... 변경 감지 뿐만 아니라 해당 데이터가 렌더링 될 때에도 watch 동작

회고

반응형에 대한 부분들을 중점으로 배워간 시간이었던 것 같다.
기본 자바스크립트에서의 데이터가 바뀌면 렌더링을 다시 해주는 복잡한 과정을 매우 쉽게 도와주는 강력한 기능을 잘 사용해야겠다는 생각이 프레임워크를 배우면서 가장 먼저 드는 생각이었다.
하지만 내부에서 바로바로 반응형을 지원하는 만큼, 컨트롤해줘야 할 부분 또한 많은 것 같다.

어쨌든 이렇게 강력한 반응형이 정말 좋은 요소인 것 같다.🤧