dev-hyunsang / doit-vuejs

Do it! Vue.js 입문를 보고 기록한 내용

Do it! Vue.js 입문!

Do it! Vue.js 입문를 보고 Vue.js를 공부합니다.
'Do it! Vue.js 입문' 책 예제 코드 저장소

뷰 인스턴스 라이프 사이클

beforeCreate

인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계입니다.
data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없습니다.

created

beforeCreate 라이프 사이클 단계 다음에 실행되는 단계입니다. data 속성과 methods 속성이 정의되었기 때문에 this.dat 또는 this.fetchData()와 같은 로직들을 이용하여 data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있습니다. 아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없습니다.

data속성과 methods속성에 접근할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋습니다.

beforeMount

created 단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(dom)에 인스턴스를 부착하기 전에 호출되는 단계입니다. render() 함수가 호출되기 직전의 로직을 추가하기 좋습니다.

mounted

el 속성에서 지정한 화면요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 화면 요소(dom)에 접근할 수 있어 화면 요소를 제어하는 로직을 수항해기 좋은 단계입니다.
돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있습니다.

beforeUpdate

el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됩니다. 치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch 속성으로 감시합니다.

beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이며, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있습니다. 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않습니다.

updated

데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계입니다.
데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계입니다. 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 합니다.
따라서 데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate에 추가하고, udpated에서는 변경 데이터의 화면 요소(dom)와 관련된 로직을 추가하는 것이 좋습니다.

beforeDestroy

뷰 인스턴스가 파괴되기 직전에 호출되는 단계입니다. 이 단계에서는 아직 인스턴스에 접근할 수 있습니다. 따라서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계입니다.

destroyed

뷰 인스턴스가 파괴되고 나서 호출되는 단계입니다. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴됩니다.

뷰 컴포넌트

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미합니다.
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있습니다. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 휠씬 편리합니다. 모든 사람들이 정해진 방식대로 컴포넌트를 등록하거나 되므로 남이 작성한 코드를 직관적으로 이해할 수 있습니다.
컴포넌트 간의 관계는 자료구조의 트리(Tree) 모양과 유사합니다.

컴포넌트 등록하기

컴포넌트를 등록하는 방법은 전역과 지역의 두가지가 있습니다. 지역(Local) 컴포넌트는 특정 인스턴스에서만 유효만 범위를 갖고, 전역(Global) 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있습니다.
더 쉽게 말하면 지역은 특정 범위 내에서만 사용할 수 있고, 전역은 뷰로 접근 가능한 모든 범위에서 사용할 수 있습니다

Vue.component('컴포넌트 이름', {
    // 컴포넌트 내용
});

전역 컴포넌트 등록 형식에는 컴포넌트 이름과 컴포넌트 내용이 있습니다. 컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그(custom tag) 이름을 의미합니다. 태그이름의 명명 규칙은 HTML 사용자 정의 태그 스펙에서 강제하는 '모두 소문자' 와 '케밥 기법' 을 따르지 않아도 됩니다.

• 케밥 기법

컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용이 작성합니다.
컴포넌트 내용에는 template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있습니다.

전역 컴포넌트가 화면에 나타나기까지의 처리 과정

• 뷰 라이브러리 파일 로딩
• 뷰 생성자로 컴포넌트 등록 Vue.component()
• 인스턴스 객체 생성(옵션 속성 포함)
• 특정 화면 요소에 인스턴스 부착
• 인스턴스 내용 변환(등록된 컴포넌트 내용도 변환)
  • <my-component>가 <div>로 변환됨
• 변환된 화면 요소를 사용자가 최종 확인

인스턴스가 생성되고, 인스턴스 내용이 화면 요소로 변환될 때 컴포넌트 태그도 함께 변환됩니다.
컴포넌트 태그에 정의한 컴포넌트 내용은 사용자가 볼수 있는 형태읭 요소로 최종 변환되겠죠.

전역 컴포넌트에 등록하라면 HTML에서 사용할 태그 이름을 컴포넌트 이름으로 작성하고, 중괄호 {} 안에는 HTML 태그가 실제로 화면에서 그려질 때 표시될 내용(컴포넌트 내용)을 작성해야 합니다.

예제에서는 컴포넌트의 이름을 my-component로 지정했고, 컴포넌트 내용으로는 template 속성을 정의하고 '전역 컴포넌트가 등록되었습니다!'라는 <div>태그를 작성하였습니다.

이 컴포넌트를 아래와 같이 HTML에 추가하면 최종적으로 컴포넌트가 등록됩니다.

<my-component></my-component>

등록된 my-component 컴포넌트는 실제로 화면에 아래와 같이 그려집니다.

<div>전역 컴포넌트가 등록되었습니다.</div>

결론적으로 인스턴스가 생성된 후 화면에 그려질 때 실제 HTML 코드 모양은 다음과 같습니다.

<div id="app">
    <button>컴포넌트 등록</button>
    <!-- 등록한 my-component가 최종적으로 변환된 모습 -->
    <my-component></my-component>
</div>

지역 컴포넌트 등록

지역 컴포넌트 등록은 전역 컴포넌트 등록과는 다르게 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 됩니다.

new Vue({
    components: {
        '컴포넌트 이름': 컴포넌트 내용
    }
});

컴포넌트 이름은 전역 컴포넌트와 마찬가지로 HTML에 등록할 사용자 정의 태그를 의미하고, 컴포넌트 내용은 컴포넌트 태그가 실제 화면 요소로 변활될 때의 내용을 의미합니다.

변수 cmp에는 화면에 나타낼 컴포넌트의 내용을 정의했습니다. 컴포넌트의 내용에 template, data, methods 등 여러 가지 속성이 들어갈 수 있지만 여기서는 간단히 컴포넌트를 등로가흔ㄴ 코드만 보여주기 위해 template 속성만 사용하였습니다. template 속성에 <div> 태그 1개만 설정합니다. 뷰 인스턴스에 components 속성을 추가하고 컴포넌트 이름에는 my-local-component를 컴포너트 내용에는 앞에서 컴포넌트 내용을 정의한 변수 cmp를 지정합니다.

<div id="app">
    <button>컴포넌트 등록</button>
    <my-local-component></my-local-component>
</div>

지역 컴포넌트와 전역 컴포넌트의 차이

지역 컴포넌트와 전역 컴포넌트의 차이점을 이해하기 위해서는 앞에서 배운 인스턴스의 유효 범위를 이해하야 합니다. 인스턴스의 유효 범위란 HTML의 특정 범위 안에서만 인스턴스의 내용이 유효한 것

인스턴스 유효 범위와 지역 컴포넌트, 전역 컴포넌트 간 관계 확인

HTML에서 <div id="app2"> 태그를 하나 더 추가하고, 인스턴스도 하나 더 추가하였습니다.
<div id="app2"> 태그에 전역, 지역 컴포넌트를 모두 등록하였습니다.

첫 번째 인스턴스 영역과 두 번째 인스턴스 영역을 구분하기 위해 구분석으로는 <hr>태그를 사용하였습니다.

첫 번째 인스턴스 영역에는 전역, 지역 컴포넌트가 모두 정상적으로 나타났습니다. 하지만 구분선 밑에 두 번째 인스턴스 영역에는 전역 컴포넌트만 나타나고, 지역 컴포넌트는 나타나지 않았습니다. 전역 컴포넌트와 지역 컴포넌트의 유효 범위가 다르기 때문입니다.

전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성으로 등록할 필요 없이 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있습니다. 반대로 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해 줘야 합니다.

뷰 인스턴스의 유효 범위에서 설명한 인스턴스의 범위도 적용됩니다. 첫번째 인스턴스의 유효 범위는 첫 번째 인스턴스 영역으로 제한되기 때문에 <div id="app">에 지역 컴포넌트를 등록했어도 두 번째 인스턴스 영역인 <div id="app2">의 범위 안에서는 지역 컴포넌트가 인식되지 않아 HTML 사용자 정의 태그로 인식하게 됩니다.

<my-local-component>태그는 두번쨰 인스턴스의 유효 범위 안에 있더라도 이 컴포넌트가 등록된 첫 번째 유효 범위를 벗어나기 때문에 브라우저에서는 HTML 사용자 정의 태그로 인식하고, 뷰에서는 해당 컴포넌트를 제대로 등록했는지 물어보는 오류를 표시합니다.