vue 양방향 컴포넌트 바인딩 (+Vue가 정말 싫다.)

나는 아직도 VUE가 잘 이해가 안간다.

도저히 이해를 할 수가 없는 언어다.

 

리액트같으면 양방향 컴포넌트를 구현할 때 그냥 state 변경 함수를 넘겨주어

간단하게 처리할 수 있는데

 

Vue에서는 이중 삼중으로, emit이란 문법을 이용해서 부모요소에 발생할 이벤트를 자식요소가 발생시켜 주어야 한다.

게다가 Props는 읽기 전용이라 직접 변경도 안된다.

그래서 computed라는 별도의 기능을 추가로 넣어주기도 해야한다.

 

아래는 양방향 컴포넌트 바인딩이다.

 

아래의 코드는 으레 SPA가 그렇듯 App.vue가 메인을 담당하고,

MsgInput은 기능이 묶인 컴포넌트이며,

BaseInput은 MsgInput의 Input 태그를 담당하는 shared 컴포넌트이다.

 

App.vue

 

MsgInput.vue

 

BaseInput.vue

 

위의 코드들은 아래 기능 하나만을 위해 만들어진 코드다.

그냥 단순한 양방향 바인딩이다...

 

위의 기능을 만들기 위해 별 이상한 짓거리를 다 해야한다.

 

자식요소로부터 부모로 이벤트 발생 조건을 넘겨준다는 emit은 진짜 이해하기 어려운 컨셉처럼 느껴지고,

심지어 update라는 이벤트는 DOM에서는 없는 이벤트이다. vue의 자체적 이벤트인데 공식문서를 뒤져봐도 그 설명이 잘 안나와있다. 그냥 그렇게 쓰라고만 나와있다.

 

---

하지만 장점은 하나 있다.

위의 더럽고 이해안가는 코드에도 불구하고, 생산성은 좋다.

 

MsgInput.vue가 여러개 필요할 경우

그냥 여러개 넣고 ref만 주렁주렁 달아주면 컴포넌트들을 쉽게 재사용할 수 있다.

---

vue는 생산성은 좋지만

이해하기가 어려운 프레임워크인 것 같다.

사실 프레임워크를 이해하려는 내 시도가 잘못된 것인지 모르겠다.

 

자유도가 높은 리액트가 많이 그립다.

---

즉 결론은

 

• vue는 생산성이 좋은 언어이다. 컴포넌트를 만들고 재사용하기가 용이하다.
• 하지만 compute, watch, emit 등 직관적이지 못한 프레임워크 특유의 냄새가 짙게 난다.
• 예를들어, 리액트는 부모의 state를 변경하고 싶을때 직관적으로 자식요소로 state 변경 함수를 props로 내려주면 되지만,
  뷰에서는 부모의 state를 변경하려면 자식요소에서 emit으로 부모에게 이벤트 실행조건을 넘겨줘야하고, v-model을 사용할 경우 DOM에도 공식문서 설명도 제대로 안나와있는 update 이벤트를 알아야하며, props도 강제 변경이 되지 않아 computed를 사용해야한다.
• 자바스크립트를 사랑한다면 리액트가 훨~씬 나은것 같은 개인적인 생각.