[ Component ]
- 조합하여 화면을 구성할 수 있는 블록을 의미하며 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능
- 컴포넌트는 Vue의 가장 강력한 기능 중 하나이다
- 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 된다
- 컴포넌트는 Vue의 인스턴스이기도 해서, 모든 옵션 객체를 사용할 수 있다
- 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다
- 싱글 파일 컴포넌트는 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법이다
- <ul>,<ol>,<table> 와 같은 일부 엘리먼트는 그 안에 어떤 엘리먼트가 나타날 수 있는지에 대한 제한을 가지고 있으므로,
사용자가 지정한 컴포넌트가 삽입 시 오류가 발생한다. 해결방법은 is 특수 속성을 사용하는 것이다
- Vue는 W3C규칙인 사용자 지정 태그 이름을 적용하지는 않지만, 모두 소문자 형식으로 하이픈을 포함하는 것이 좋다
( 단어가 한개이면 컴포넌트 태그가 표준 태그와 겹칠 수 있으며 HTML 속성은 대소 문자를 구분하지 않기 때문에 )
- data는 반드시 함수여야한다 이유는 재사용 가능한 하위 구성 요소의 각 개별 인스턴스에 대해 작업 중인 모든 데이터를 포함하는 고유 한 개체가 있는지 확인하기 위함인데, 즉 이곳저곳에서 컴포넌트를 재사용할 때, 각각의 data를 가지고 있게 하기 위함이다
- 컴포넌트가 같은 레벨일지라도 바로 데이터를 보낼 수 없고 상위 컴포넌트를 들려서 전송한다
- 컴포넌트를 어느 곳에 사용하고 어느 부분이 컴포넌트 화 해야할지에 대해 정확한 설계가 없다면 전박적인 코드의 가독성과 유지관리 효율성이 저하되고 컴포넌트 구조가 복잡해진다
- props는 해당 컴포넌트에서 절대적으로 필요한 요소로 생성하자 - props는 해당 컴포넌트에서 직접적으로 변경이 불가능하기 때문에 이미 넘어온 props를 변경하기 위해서는 바인딩되어 있는 props를 data에 재 바인딩해야 하는 경우가 많다 이렇게 되면 상위 컴포넌트로 이벤트를 전달하는 emit이 많아지게 된다
[ props / emit ]
* 프롭스 속성 : 상위에서 하위로 데이터를 내려준다
* 이벤트 에밋 속성 : 하위에서 상위로 이벤트를 올려준다
- watch의 사용을 최소화하자 - watch가 많다는 것은 이미 해당 컴포넌트에서 반강제적으로 반응적인 모델이 필요하다는 경우이다. watch에 종속된 기능이 거미줄처럼 엉켜 유지보수가 어렵다
[ 감시기능 ]
* watch : Vue 인스턴스의 특정 프로퍼티가 변경될 때 지정한 콜백 함수가 실행되는 기능
* computed : getter 함수 내에 속한 프로퍼티의 변경여부를 추적하고 변경 시 자동으로 값을 변경하고 캐싱해주는 반응형 getter
- 이 밖의, 공통적인 methods와 같은 Script들은 javaScript 파일로 별도 분리하는 것이 좋으며 컴포넌트 간의 깊은 바인딩은 자제해야 한다
[ Router ]
- 일반적으로 뷰에서 화면이 전환될 때, 전환하는 행위를 Route라고 표현하는데 Vue에서는 유용한 라우팅 라이브러리로 Vue Routers를 제공한다
- Vue는 SPA를 제작할 때 라우터를 사용하여 URL 변경 시 DOM을 새로 갱신하는 것이 아니라 미리 컴포넌트를 가지고 있다가 변경된 요소 영역만 갱신한다
# DOM (Document Object Model)
- 문서 객체 모델로 HTML에 접근하기 위한 일종의 인터페이스 (ex: <a>,<p>, <body> etc..)
- 웹페지에서 페이지 이동을 할 때는 사용자가 url을 다 쳐서 이동하지 않기 때문에, 이때 화면에서 특정 링크를 클릭해서 페이지를 이동할 수 있게 해주는 기능이 <router-link>이며 <a> 태그의 역할과 같다 (push도 router-link와 같은 역할)
- 뷰 라우터 옵션에는 routes (라우팅 할 URL과 컴포넌트 값 지정) 와 mode (URL의 해쉬 값 제거 속성)가 있다
- 동적 라우트 매칭은 특정 패턴을 가진 경로들을 동일한 컴포넌트에 매핑해야 할 경우 사용하는 기법이다
또한, path에서 콜론으로 시작하는 부분이 다르더라도 같은 경로에 매핑된다
- 이 밖의 router.replace() 와 router.go() 기법이 있다
[ Mix-in ]
- 소프트웨어 개발 원칙에는 여러 가지가 있는데 그중 하나 DRY(Do not Repeat Yourself) 원칙이 있다. "같은 동작을 하는 코드를 반복적으로 작성하지 마라"라는 뜻을 가지는데 Vue에서는 중복 코드를 제거하기 위해 여러 재사용 테크닉이 존재하는데 그중 하나가 믹스인이다
- Mixin이란 기능을 따로 정의해두고 필요할 때 마다 해당 믹스인 파일을 Vue 컴포넌트에 결합해서 사용하는 방법을 말한다
간단한 예시
실행 결과 콘솔창에 'mixin hook called' 로그와 'component hook called' 로그를 확인할 수 있습니다
실행 순서는 mixin 훅이 먼저 실행되는 것을 알 수 있었고,
만일 객체에 충돌하는 키가 있을 경우는 컴포넌트의 옵션이 우선순위를 갖는다
위 예시와 같이 컴포넌트 자체에 중첩 옵션이 포함되어 있으면 "병합"과정이 이루어지는데
이때 data 객체의 내용이 상충하는 경우에는 컴포넌트에 선언된 data 객체를 우선으로 하여 병합됩니다
mixin title = "믹스인 타이틀"
component title = "first title"
결과는 title의 값이 "first title"로 컴포넌트의 타이틀로 병합되어 파싱 되는 것을 확인할 수 있습니다
[ Life-cycle ]
* Diagram
- Vue 인스턴스가 생성된 후 우리 눈에 보이고 사라지기까지의 단계
- 과정 : 생성 (create) -> DOM에 부착 (mount) -> 업데이트 (update) -> 사라짐 (destory)
{ Create }
- beforeCreate : 데이터 관찰 및 이벤트 설정 전에 동기적으로 호출되며 가장 먼저 실행되는 훅
- created : 인스턴스가 생성된 후 동기적으로 호출된다. data 관찰, computed 속성, method 등의 옵션 처리를 한다 그러나 마운트 단계가 시작되지 않았으며 $el 속성을 사용할 수 없다
{ Mount }
- beforeMount : 마운트가 시작되기 직전에 호출되며, render 함수가 처음으로 호출된다
- mounted : 모든 자식 컴포넌트가 마운트 되었다고 보장하지 않는다. 전체 화면이 렌더링 될 때까지 기다리려면 mounted 내에서 $nextTick 기법을 사용해야 한다
* $nextTick : 일반적으로 자식 컴포넌트 mounted 훅 발생 후 부모 컴포넌트의 mounted 훅이 발생하는데,
만약 자식 컴포넌트가 비동기 처리로 데이터를 받는다면 부모 mounted에서는 모든 자식 컴포넌트가 마운트 된 상태로 보장받지 못한다 그렇기에 $nextTick 기법을 사용해서 자식 컴포넌트가 마운트 될 때까지 기다린다
{ Update }
- beforeUpdate : DOM이 패치되기 전에 데이터가 변경될 때 호출한다
- updated : 데이터가 변경되어 가상 DOM이 다시 렌더링 되고 호출한다. 마운트와 마찬가지로 전체 화면이 렌더링 되길 기다리는 것을 원한다면 $nextTick 기법을 사용한다
{ Destory }
- beforeDestory : 이 훅은 뷰 인스턴스가 제거 되기 직전에 호출되며, 컴포넌트는 원래 모습과 모든 기능들을 그대로 가지고 있는 단계이다
- destoryed : 이 훅은 뷰 인스턴스가 제거 된 후에 호출되며, Vue 인스턴스의 모든 디렉티브가 바인딩 해제되고 모든 이벤트 리스너가 제거된다
'TIL > Front' 카테고리의 다른 글
| Vue.js 초급 공부 Part V - Vue CLI (0) | 2021.12.09 |
|---|---|
| Vue.js 초급 공부 Part IV - Template (0) | 2021.12.08 |
| Vue.js 초급 공부 Part III - Http / axios (0) | 2021.12.07 |
| Vue.js 초급 공부 Part II - Component & Router (0) | 2021.12.07 |
| Vue.js 초급 공부 Part I - Plugin install & Component (0) | 2021.12.07 |
