Vue (2)

클래스와 스타일 바인딩

클래스 바인딩

• 속성의 이름은 '' 로 묶어주어야 함
• data() 객체 데이터 내부에서 반응형 데이터를 활용해야 한다면, 이 데이터를 computed(계산된 데이터) 로 만들어 this 키워드와 함께 사용할 수 있다.
• 객체 데이터 대신 배열 데이터로 동적인 html 클래스를 제어할 수 있다.
• v-model ... 양방향 데이터 바인딩

스타일 바인딩

:style="`color: ${color};`" ... 템플릿 리터럴 스타일
:style="{ color }" ... 인라인 스타일 (템플릿 리터럴보다 더 간단함

• 객체 데이터 내의 속성의 이름과 데이터의 이름이 같다면 하나로 생략해서 작성 가능 color: color -> color
• 객체 데이터를 직접 바인딩 하여 연결시키지 않고, 이를 하나의 데이터로 묶어 연결하는 것이 좋음
• 객체 데이터를 여러개 바인딩 시킬 경우, [data1, tata2] 배열을 활용한다.
• v-if, v-else-if, v-else 디렉티브를 형제 요소로 부여하여 사용할 수 있다. (단, v-if 와 v-else(else-if) 사이에는 어떠한 요소도 없어야 함)
  <template> 등을 활용하면 좋음 ... <div> 도 사용하지만, div 를 출력하고 싶지 않을 때 (template 는 직접 출력되지 않고 내부만 출력됨)
• v-show ... display: none; 스타일을 추가 / 제거함
  초기 렌더링 비용이 높음
  toggle 등에서의 전환 비용이 낮음 (보여지거나 보여지지 않는 구조가 많을 때 적합)
  • 구조를 먼저 생성하고, 스타일 작업을 하기 때문에 원치 않게 화면에 잠시 노출될 수 있음 ... v-clock 디렉티브와 함께 사용해서 이를 방지하는 것이 좋음
• v-if ... lazy (값이 false 이면 해당하는 요소를 구조적으로 생성하지 않음 / 렌더링 하지 않음, 참인 값이 할당되면 그때 출력
  초기 렌더링 비용이 낮다
  toggle 등의 전환 비용이 높음 (보여지거나 보여지지 않는 구조가 적을 때 적합)
  
• cf) v-if 를 통한 렌더 제어 방식은 해당 요소를 주석으로 처리하여 요소의 구조를 사라지게 하는 차이가 있음.
• v-for 를 사용한 엘리먼트에는 절대 v-if를 사용하지 않도록 함.
  <template> 태그를 상위에 만들어 여기에 v-for 을 생성하고, 내부에 태그를 생성한 후 이곳에 v-if 를 사용하도록 한다.
  

리스트 렌더링

• v-for 을 통해 해당하는 요소를 반복할수 있는 데이터로 출력 할 수 있다.
• v-for 는 (item, index) in items 와 같이 두번째 인자로 index를 넘겨줄 수 있다.
  다만, 인덱스와 요소가 완전히 매칭되지는 않는, 출력되는 순서개념임
• Vue 를 통해 렌더링을 할 때, :key 를 부여하여 고유한 값을 넣어주어야 한다. (요소가 고유함을 증명하여 식별하게 함)
• 배열 감지: Vue 에서는 배열에서 사용할 수 있는 변이 메소드(push, pop, shift, unshift, ...) 들을 통한 배열의 변경을 감지 할 수 있다.
• 원래의 배열을 변경하지 않고 새 배열을 반환하는 등의 비-변이 메소드(filter, concat, slice, ...) 를 통해 반환된 새 배열을 반응형 데이터에 할당할 수 있다. (최대한 기존 배열과 변경사항이 있을 때만 렌더링이 되도록 최적화 되어있음)
• <template> ... 여러 개의 요소를 블럭 단위로 한번에 v-for 에서 렌더링 할 수 있다.
• <form> 요소에서 @submit 이 동작하면 기본적으로 새로고침 됨 ... 페이지가 새로고쳐지는 기본 동작을 방지해야 함

이벤트 핸들링

• v-on ... @ 기호를 통해 DOM 이벤트를 듣고, 실행한다.
• 이벤트 수식어
  .stop: 클릭 이벤트 전파 중단 / 이벤트 버블링의 전파 중단
  .prevent: 이벤트가 페이지를 다시 로드하지 않게 하는 등 기본 동작 방지
  .once: 이벤트에 연결된 동작을 한번만 실행
  .capture: 해당하는 이벤트에 가장 높은 우선순위를 부여하여 먼저 실행되도록 함.
  .self: event.target이 엘리먼트 자체인 경우에만 트리거를 처리
  .passive: 이벤트를 통해 동작하는 메소드와 화면의 렌더링을 분리하여 처리
• 키 수식어 ... 키보드 이벤트를 청취할 때
  .meta: Window 에서의 window 키, Mac 에서의 command 키 / @keyup 에서는 동작하지 않음 (@keydown 과 사용)
  .exact: 키 이벤트에 연결되어있는 해당 수식어만을 청취 (다른 키와 함께 누르면 청취되지 않고, 오직 해당 키 하나만을 눌러야 함) ... 키 / 마우스 이벤트 모두에 사용 가능
  

회고

vue에 클래스, 렌더링, 이벤트에 관련된 부분들을 배우게 되었다.
확실히 왜 프레임워크가 필요한지에 대해 조금씩 알아가고 있는 것 같다. 바닐라 js 로 구현할 때보다 훨씬 더 간결하고 유지보수적인 측면에서도 큰 이점이 있는 것을 느꼈고 즉각적인 반응형에 최적화 되어 있는 점이 가장 큰 메리트가 되는 것 같다.