[Vue] Vue.js의 라이프 사이클

• Creation, Mounting, Updating, Destruction

---

✏️ 렌더링이란?

• rendering은 renderer engine(skia)이 한다.
• Render는 html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력 해준다. (화면에 뿌려주는 역할)

✏️ 바인딩(Binding)이란?

• 값이 서버상에서 들어간 것
• 이름을 속성에 연관(bind) 시키는 과정 (특정 객체에서 실행되게끔 고정시키는 그런 역할)
• 컴퓨터 프로그래밍에서 각종 값들이 확정되어 더 이상 변경할 수 없는 구속(Bind) 상태가 되는 것
• 정적 바인딩(static binding) : 원시 프로그램의 컴파일링 또는 링크 시에 확정되는 바인딩
• 동적 바인딩(dynamic binding) : 프로그램이 실행되는 과정에서 바인딩 되는 것

✏️ 컴포넌트란?

• 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는 데 도움이 된다.
• 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트
• 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있다.
• Vue 컴포넌트는 Vue 인스턴스이기도 함
  • 모든 옵션 객체를 사용할 수 있음 (루트에만 사용하는 옵션은 제외)
  • 같은 라이프사이클 훅 사용 가능

✏️ 돔이란?

• 직접 DOM API를 사용하지 않고, domNode 객체를 활용하게 된다.
  • 이러한 처리는 실제 DOM이 아닌 메모리에 있기 때문에 훨씬 더 빠르다.

✏️ 템플릿이란?

• Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수 있는 HTML 기반 템플릿 구문을 사용
• 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석할 수 있는 유효한 HTML이다.
• 내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일 함
• 반응형 시스템과 결합된 Vue는 앱 상태가 변경될 때 최소한으로 DOM을 조작하고 다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악 가능
• 가상 DOM 개념에 익숙하고 JavaScript의 기본 기능을 선호하는 경우 템플릿 대신
  렌더링 함수를 직접 작성할 수 있으며 선택사항으로 JSX를 지원

✏️ 훅(hook)이란?

• 훅킹(Hooking) : 이미 작성되어 있는 코드의 특점 지점을 가로채서 동작 방식에 변화를 주는 일체의 기술
• 대상 코드의 소스를 수정하지 않고 원하는 동작을 하도록 해야 하므로 기술적으로 어렵기도 하고
  운영체제의 통상적인 실행 흐름을 조작해야 하므로 때로는 위험하기도 하다.