Vue : Basic Syntax 2 (v-bind, v-on)

저번엔 Attribute 속성을 추가하는 것을 배웠다. 동일하게 Class와 Style 속성을 Binding 하는 것을 배울 것인데, 속성으로 다루지 않고 나눈 이유는 반응성 Web에서 가장 많이 다루는 속성이기 때문이다. 예를들어, 클릭했을때 새로운 Attr가 생기는 것 보다는 bootstrap의 class 추가 혹은 style의 추가로 반응을 띌 수 있다. front에서 중요한 부분이니 집중해보자!

---

v-bind

Class and Style Bindings

: class와 style은 모두 HTML 속성이므로 다른 속성과 마찬가지로 v-bind를 사용하여 동적으로 문자열 값을 할당할 수 있다

: Vue에서 class 및 style 속성 값을 v-bind로 이용할때 객체 or 배열을 활용하여 on / off 혹은 다중 값을 전달하여 작성한다

예를들어 반응형으로 class에 글자 색상, 배경, style에 폰트, 폰트 사이즈 등등 여러개 넣어줄 때 한개씩 넣어준다면 번거롭고 오류가 발생하기 쉽다.

 

Class : binding to Objects

 

: 객체를 :class에 전달하여 클래스를 동적으로 전환할 수 있다. 동적의 의미를 생각하며 따라가보면 이해하기 쉽다.

newClass라는 클래스는 addNewClass가 true일 경우에 추가

false일 때의 class 속성은 정의 되지 않는다.

 

예를들어 특정 이벤트 혹은 반응형에 의해 addNewClass의 반응형 변수 값이 true로 바뀐다면?

true일 때의 class 속성이 정의 된다

 

물론 다중 클래스도 가능하다. 객체의 형태로 연결하여 HTML의 부분이 길어지는 단점이 있다.

넣고싶은 class가 있다면 true false로 조절할 수 있다

class 2개가 추가되어있는 모습

 

위의 단점을 없애고 싶다면? 추가되는 class 내부는 반응형 객체라고 생각하자. 그대로 Vue Script에서 작성한다면 객체를 포함하는 변수를 넘겨주기만하면 동일하게 동작할 것이다.

addClass{객체}를 넣어줄 예정

newClass와 newClass2를 key로, addNewClass3와 addNewClass4를 value로

위와 동일한 결과를 확인할 수 있다.

 

directive의 value에 해당하는 부분 역시 {{ }} 와 동일하게 최상위 ref일 경우 unwarpping이 진행되고, 최종 결과물이 ref로 감싸져 있어도 내부 데이터를 불러온다. 

 

Class : binding to Arrays

 

: 배열에 바인딩하여 클래스 목록을 한번에 적용할 수 있다.

 

array 형식으로 class에 적용시켜줄 예정

문자열로 정의하여 class에 적용된다

다른 방법과 동일한 결과를 출력하는 모습

 

세세한 방법으로 총 3가지를 알아보았는데, 바인딩하는 클래스의 종류가 많지않다면 inline 방식으로 작성해도 문제가 없지만 여러가지를 바인딩한다면 Script에서 정의하는 것이 깔끔하다.

 

+ 이미 class가 있는경우 덮어씌워질까? 아니면 추가될까?

확실히 두번째가 HTML 요소를 보기에 편하다

문제없이 추가되는 모습

 

+ 배열 구문 내에서 객체 구문을 추가할 수 있을까?

배열내부에 객체를 넣은 상황으로 앞서 배운 2가지가 섞여있는 방법

당연히 추가되는 모습을 볼 수 있다

 

Style : binding to Objects

 

class은 value가 단일 데이터 형태로 추가되지만 다르게 style 속성은 value가 객체의 형태를 이룬다. 예를들어 class = " 궁서체 "라면 style = " font:궁서체; "라는 것이다. 또한 class 에서는 객체의 value가 boolean 형태로 on / off하는 형태였다면, style은 객체의 value가 그대로 전달되는 것만 다른 점이다.

text의 color와 font-size를 전달 받는다

반응형 데이터로 정의

문제없이 전달된 모습

 

class에서 했던 것처럼 반응형 변수 하나만 전달해서 데이터를 출력할 수 있다.

style의 key를 전달할 때, 띄어쓰기와 - 는 사용할 수 없기 때문에 문자열로 전달하는게 옳은 것이다.

 

객체 내부에 데이터가 있으며 font-size의 경우 평가되기 전 데이터에 문자열과 합쳐지는 과정이 있어서 unwrapping이 진행되지 않는다. 따라서 .value를 써야만 한다. (이외 newColor와 newBackgroundColor는 ref()로 감쌀경우 value를 생략할 순 있다)

세가지 style이 제대로 적용된 것을 확인

 

특이한 점은 배열 형태로도 전달이 될 수 있다는 점. 

 

객체의 데이터가 자동적으로 병합된다

위에는 font-size를 문자열로 사용, 이번에는 카멜 케이스 적용 모두 된다는 것을 보여주기 위함

 

kebab-cased와 camelCase 작성이 모두 가능하지만 camelCase를 더 권장한다.

올바르게 출력되는 모습

---

v-on

기본 틀

 

: DOM 요소에 이벤트 리스너를 연결 및 수신

: JavaScript에서 사용하던 addEventListener의 역할

v-on:event	조건
click	요소가 클릭되었을 때 발생
input	input 요소의 값이 변경되었을 때 발생
submit	form 요소가 제출되었을 때 발생
keydown	키가 눌렸을 때 발생
keyup	키가 눌렸다가 떼어졌을 때 발생
mouseover	마우스가 요소 위를 올라갔을 때 발생
mouseout	마우스가 요소에서 벗어났을 때 발생
focus	요소가 포커스를 받았을 때 발생
blur	요소가 포커스를 잃었을 때 발생
change	요소의 값이 변경되었을 때 발생
scroll	요소가 스크롤될 때 발생

 

• handler 종류

1. Inline handlers

: HTML 요소에 직접 이벤트 핸들러를 정의하며, 해당 이벤트가 발생했을 때 실행될 JavaScript 코드를 실행한다. 예시는 아래와 같다.

간단한 이벤트의 경우 해당 방식으로 해도되지만, 가능한 프레임워크에서 제공하는 방식을 권장한다.

 

: Inline Handler에서의 method 호출

• method 이름을 직접 바인딩하는 대신 Inline Handler에서 method를 직접 호출할 수 있다
• 기본 이벤트 대신 사용자 지정 인자를 전달할 수 있다

console 창에서 Hi가 출력되는 것을 볼 수 있다.

 

물론 위처럼 작성하면 전달되는 event를 받지 못하게 되는데, 이때 넘겨주는 인자로 $event를 추가하고 함수에서도 event 매개변수를 추가해주면 해결된다.

 

 

2. Method handlers

: JavaScript 내부에 정의된 메서드를 사용한다

: Inline handler로는 불가능한 상황에서 사용한다

: 코드 가독성과 보수의 이점을 갖고 있다

클릭시 greeting함수 호출

Hi를 출력하라는 함수 정의, console에서 출력되는 모습을 볼 수 있다.

 

두 방식을 한번에 비교해보자

같은 동작 같은 결과를 보여준다

 

Modifiers

 

1. Event Modifiers

• Vue는 v-on에 대한 Event Modifiers를 제공한다 (stop, prevent, self 등)
• method 파트는 DOM 이벤트에 대한 처리보다 데이터에 관한 논리를 작성하는 것에 집중할 것이기 때문에 Modifiers를 적극 활용해준다
• Modifiers는 chained되므로 작성 순서(실행 순서)에 유의해서 작성한다

2. Key Modifiers

• 키보드 이벤트 수신 시, 특정 키 별도 modifiers를 사용 가능한다.

위의 버튼은 enter키가 눌려 올라올때 submitForm 함수가 실행되는 것이다

---

v-model

: 양방향 바인딩 = form을 처리할 때 사용자의 input 입력 값을 실시간으로 JavaScript 상태에 동기화 해야하는 경우 사용

 

먼저, 양방향은 두가지 방법으로 구현할 수 있는데 장단점이 있다.

 

1. v-bind와 v-on을 함께 사용하는 방법

: v-bind를 사용해 input 요소의 value 속성 값을 입력 값으로 사용

: v-on을 사용하여 input 이벤트가 발생할 때마다 input 요소의 value 값을 별도 반응형 변수에 저장하는 핸들러 호출

 

2. v-model 사용하는 방법

 

따로 함수를 정의해서 데이터를 넘겨줄 필요 없이 양방향으로 연결

 

실행 결과는 위와 동일하다. 텍스트 하나를 출력하는데 함수 하나가 줄어든 경우면 복잡해질 경우 더 편해질 것이다. 하지만, v-model에서만의 문제점이 있다.

'ㄷ' 이 실시간으로 출력되지 않는 모습

 

IME가 필요한 언어(언어의 조합이 필요한 언어)는 여러 키가 합쳐져 글자를 형성하기 때문에 영어와 달리 실시간 변화를 캐치하기 어렵다. 따라서 해당하는 언어를 올바르게 응답하려면 v-bind와 v-on 방법을 이용해야만 한다.

 

다양한 v-model 속성

 

v-model은 연결 고리가 2가지가 있다. input의 type과 정의된 반응형 변수다. 알맞은 type과 맞는 변수 type이 정의되어야 의도한 결과를 불러올 수 있는데, 예를들어 type이 checkbox면 반응형 변수에 true or false를 반환하ㄴ는데, 초기 설정값이 (의도하지 않았다면)문자열이거나 배열 혹은 객체일 경우 문제가 발생할 수 있다.

 

하지만 다음의 특이한 예시를 보자

배열을 반응형으로 설정

특이하게 Boolean 값으로 담기지 않고, 해당 input의 value 값이 담기게 된다

 

이번엔 다른 예시인 Select를 확인해보자.

가장 윗 옵션은 선택불가 및 내부 데이터를 채워놓아 UX적으로 효과를 본다

빈문자열을 기본값으로 출력

선택시 Selected와 연결되어 출력되는 모습

---

다양한 v-model 형식에서 어려움을 겪었지만, 어느정도 이해가 된 상태다. 이런것도 많이 쓰다보면 익숙해지겠지~