[IT 도서] 고양이도 할 수 있는 Vue.js

뷰를 처음 공부하는 사람도 보기 좋을 것 같다. 그림과 함께 원리를 설명해줘서 좋다. 일단 제목이 넘 귀여워... 

뷰를 이미 사용하고 있는 입장에서 하루 날잡고 보니까 하루만에 거의 다 훑을 수 있었다.

놓치고 있거나 잘 모르고 사용하던 개념들을 책을 보면서 다시 노션에 정리해보니 이해가 되는거 같다. 

 

 

 

그림들이 이해가 잘 되게 나와있음.

 

 

화면을 렌더링하는 구조 자체는 dom이 아니라 자바스크립트 데이터라는 것입니다.

DOM이 먼저 존재하고, 이것을 읽어 들인 후에 조작하는 것이 아니라 데이터가 먼저 존재하고 이 데이터를 기반으로 적절한 DOM을 구축한다는 것입니다.

데이터의 상태에 따라 렌더링이 변경되며, 때에 따라서는 자동으로 액션을 일으키기도 합니다.

이처럼 데이터를 중심으로 하는 애플리케이션 설계를 데이터지향이라고 부릅니다.

Vue.js는 dom을 구축하는 방법으로 템플릿이라는 것을 주로 사용합니다.

데이터 바인딩이란 자바스크립트 데이터와 이를 사용하는 위치를 연결해서, 데이터에 변경이 있을 때 자동으로 dom을 업데이트 하는 기능.

 

라이프 사이클이란 뷰의 기상, 취침까지의 일정한 사이클을 나타낸 것입니다.

vue.js는 이러한 라이프 사이클을 미리 등록해서 적절한 시기에 자동으로 호출합니다.

이러한 시점을 낚아채서(훅) 우리가 원하는 처리를 할 수 있게 하는 것을 훅이라고 부릅니다.

 

created: 라이프 사이클 훅중 하나. vue 인스턴스가 생성되고, 데이터 감시 등의 리액티브 시스템과 관련된 초기화가 끝났을때, created 메서드가 자동으로 호출된다.

created와 mounted는 호출되는 시점이 비슷하지만 차이가 있다.

created는 인스턴스가 생성되고, 리액티브 데이터가 초기화된 직후에 호출됩니다.

이 훅이 호출될 때는 아직 돔이 구축되지 않은 상태입니다.

따라서 인스턴스 자신을 나타내는 this에는 접근할 수 있지만 $el, getElementsById()등을 사용한 돔 접근은 불가능합니다.

mounted는 인스턴스의 상태를 사용해서 돔을 만든 직후에 호출됩니다.

$el, getElementesById() 사용 가능, 다만 모든 자식 컴포넌트가 마운트되었다는 것은 보증하지 않습니다.

 

돔 변경을 자동화하는 데이터 바인딩을 하려면, 템플릿에서 사용하는 모든 데이터를 리액티브 데이터로 정의해야합니다.

 

리액티브 데이터란?

뷰코드를 보았을 때 메서드를 호출하지도 않았는데, 무언가 처리되고 있다는 것을 느꼈을 것입니다. 리액티브 데이터는 vue.js에서 추출했을 때(get)과 설정했을 때(set) 훅(hook) 처리가 등록되어 반응하는 데이터를 의미합니다.

단순하게 데이터를 설정했을 때도 뷰내부에서 굉장히 여러 처리가 일어납니다. 이것이 바로 리액티브 시스템입니다.

데이터 바인딩은 리액티브 시스템의 기능 중 하나입니다. 리액티브 시스템은 단순한 돔 변경뿐만 아니라 돔 변경을 최적화하고, 데이터를 동기화하고, 변경을 감지하는 기능등을 모두 포함한 것입니다.

뷰가 가지고 있는 대부분의 기능은 강력한 리액티브 시스템을 기반으로 움직입니다.

data옵션 아래 속성은 이후에 따로 추가할 수 없으므로, 값이 결정되지 않은 경우라도 초깃값 또는 빈 데이터를 넣어서 정의해야 합니다.