[Vue.js] Vue.js 개발 입문하면서 궁금했던 기초 질문들 & 소소한 링크들

Vue.js 개발 입문하면서 궁금했던 기초 질문들 & 소소한 링크들

공식 문서에 다 나오는 내용이지만, 처음에 궁금했던 것만 간추려서 작성해 보았습니다.

---

일단 인스턴스 라이프사이클 다이어그램부터 보고 시작하자.
Vue 인스턴스의 생성부터 소멸까지의 라이프사이클 hook을 이용하기 위해서는 반드시 알아야 할 그림

자세히 보기 : 인스턴스 라이프사이클 훅

 

 

 

camelCase vs. kebab-case 어떻게 써야하나?

 

HTML 속성은 대소 문자를 구분하지 않으므로 문자열이 아닌 템플릿을 사용할 때 camelCased prop 이름에 해당하는 kebab-case(하이픈 구분)를 사용해야 한다.

Vue.component('child', {
  // JavaScript는 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

 

<!-- HTML는 kebab-case -->
<child my-message="안녕하세요!"></child>

문자열 템플릿을 사용하는 경우에도 이 제한이 적용되지 않는다.

출처 : camelCase vs. kebab-case

 

computed 속성과 watch 속성의 차이는?

 

watch 속성은 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식으로 소프트웨어 공학에서 이야기하는 ‘명령형 프로그래밍’ 방식.

computed 속성은 계산해야 하는 목표 데이터를 정의하는 방식으로 소프트웨어 공학에서 이야기하는 ‘선언형 프로그래밍’ 방식

 

computed 속성 vs watch 속성

computed 와 methods 용도 차이는?

computed를 사용하는 방법과 methods를 사용하는 방법의 최종 결과는 동일하다. 
computed와 methods의 차이점은 computed는 종속 대상을 캐싱한다는 것. 
그렇기 때문에 computed는 종속 대상이 변경 될 때만 함수를 호출한다. 
시간이 많이 걸리는 계산을 할 때, computed을 사용하면 더 좋은 호율의 어플리케이션을 만들 수 있다. 
캐싱을 하지 않고, 호출 할 때마다 새롭게 계산을 해야 하는 경우에는 methods를 사용해야 한다.

자세히 보기 : computed 속성의 캐싱 vs 메소드

 

computed의 setter 함수

computed는 기본적으로 getter 함수. 필요한 경우 setter 함수를 정의하여 사용할 수 있다.
자세히 보기 : computed 속성의 setter 함수

v-if 와 v-show 의 차이

v-if는 조건부 블럭 안의 이벤트 리스너와 자식 컴포넌트가 토글하는 동안 적절하게 제거되고 다시 만들어지기 때문에 

“진짜” 조건부 렌더링.

v-if는 게으르다. 초기 렌더링에서 조건이 거짓인 경우 아무것도 하지 않는다. 조건 블록이 처음으로 참이 될 때 까지 렌더링 되지 않는다.

비교해보면, v-show는 훨씬 단순하다. CSS 기반 토글만으로 초기 조건에 관계 없이 엘리먼트가 항상 렌더링된다.
일반적으로 v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 더 높다. 

매우 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장한다.

자세히 보기 : v-if vs v-show

 

 

v-on directive : 이벤트 리스너

 

엘리먼트에 이벤트 리스너를 연결.

v-on에 methods의 함수를 넘겨주는 형태.
인라인으로 methods 에 정의된 함수를 호출시 DOM 이벤트 객체를 사용하기 위해서는 $event 를 넘겨서 사용할 수 있다.

자세히 보기 : v-on

 

 

자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하고 싶을 때는?

=> $emit 사용

 

부모 컴포넌트에서는 $on(eventName) 으로 이벤트를 감지하도록 하고, 

자식 컴포넌트에서는 $emit(eventName)을 사용하여 이벤트를 트리거해서 호출.

자세히 보기 : v-on을 이용한 사용자 지정 이벤트

부모 컴포넌트는 props를 통해 자식에게 데이터를 전달하고, 자식 컴포넌트는 events를 통해 부모 컴포넌트에게 메시지를 보낸다.

비부모-자식간의 통신은 어떻게 해야할까?

=> 이벤트 버스를 사용할 수 있다.

var bus = new Vue()
// 컴포넌트 A의 메소드

bus.$emit('id-selected', 1)
// 컴포넌트 B의 created 훅

bus.$on('id-selected', function (id) {
  // ...
})

출처 :  비 부모-자식간 통신

 

여러 컴포넌트에 분산되어있는 여러 상태와 그 상호 작용으로 인해 복잡해질때는?

=> Vuex를 쓰는 것을 고려해보자.

Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리
Flux, Redux, The Elm Architecture에서 영감을 받은 Vuex의 기본 아이디어

자세히 보기 : 상태 관리

자식 컴포넌트에서 property가 변경되는 것을 부모에 반영하고 싶다면?

=> .sync를 사용.

자식 컴포넌트가 .sync를 가지는 속성을 변경하면 값의 변경이 부모에 반영된다. 
편리하지만 단방향 데이터 흐름이 아니기 때문에 장기적으로 유지보수에 문제가 생긴다. 
자식 속성을 변경하는 코드는 부모의 상태에 영향을 미치기 때문에 자~알 사용해야 한다. 

부모 상태에 영향을 미치는 코드를 더욱 일관적이고 명백하게 만들어야 한다.

자세히 보기 : .sync 수식어

 

 

Vue Router

https://router.vuejs.org/kr/

---

References
Vue.js 공식 홈페이지
Vue.js 2.0 라이프사이클 이해하기


그외 읽어볼만한 글 

Vue.js 입문자가 흔히 저지르는 문법 실수 총정리
The correct way to force Vue to re-render a component
Element for VueJS: 5 things to love and 5 things to hate