[Do it! Vue.js] 2장 ~ 03-1장

버버니야·2022년 3월 17일

nhn vue

02장 뷰 학습을 위한 개발 환경 설정하기

책에서 구성한 환경 설정

크롬 브라우저
아톰 텍스트 에디터
노드제이에스
뷰 개발자 도구

텍스트 에디터는 기존에 사용하던 vs code로 진행하고자합니다.

이미 vue 프로젝트 생성을 해보았기 때문에 해당 내용은 이전 글 참고
Vue 설치 및 프로젝트 생성1 <- 이전 글
Vue 설치 및 프로젝트 생성2 <- 이전 글

3장 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트

03-1 뷰 인스턴스

뷰 인스턴스의 정의와 속성

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위

뷰 인스턴스의 형식은 다음과 같다.

new Vue({
  ...
});

샘플 코드

<html>
    <head>
        <title>Vue Sample</title>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue.js!'
                }
            });
        </script>
    </body>
</html>

Hello Vue.js! 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성한다.
그 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정하고,
data 속성에 message 값을 정의하여 화면의 {{message}}와 연결.

뷰 인스턴스 생성자

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다.
Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근 가능하다.

생성자를 사용하는 이유 : 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해

생성자란?
객체를 새로 생성할 때 자주 사용하느 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법

뷰 인스턴스 옵션 속성

뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template등의 속성을 의미.

위의 샘플 코드에서 data라는 미리 정의되어 있는 속성을 사용했다.
그 안에 message라는 새로운 속성을 추가하고 Hello Vue.js!라는 값을 주었다.
el 속성도 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 뜻함.
뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야 함.

<div id="app">
  {{ message }}
</div>

el 속성의 #app은 화면의 돔 요소 중 app이라는 아이디를 가진 요소라는 의미

new Vue({
  el: '#app',
});

여기서 # 선택자는 CSS의 선택자 규칙

CSS 선택자 중 # 선택자는 해당 아이디를 가진 돔 요소를 검색할 때 사용.
선택자는 해당 클래스를 가진 돔 요소를 검색할 때 사용된다.

또 다른 속성들

속성	설명
template	화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성, 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
methods	화면 로직 제어와 관계된 메서드를 정의하는 속성, 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직 추가
created	뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성

뷰 인스턴스의 유효 범위

뷰인스턴스의 유효 범위란?

뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타난다.
인스턴스의 유효 범위는 el 속성과 관련이 있다.

인스턴스가 생성된 후 화면에 나타나는 과정
뷰 라이브러리 파일 로딩 -> 인스턴스 객체 생성 -> 특정 화면 요소에 인스턴스를 붙임 -> 인스턴스 내용이 화면 요소로 변환 -> 변환된 화면 요소를 사용자가 최종 확인

new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue.js!'
	}
});

자바스크립트 코드 상에서 인스턴스 옵션 소성 el 과 data를 인스턴스에 정의하고 new Vue()로 인스턴스를 생성한다.
브라우저에서 위 코드를 실행하면 아래와 같이 el 속성에 지정한 화면 요소(돔)에 인스턴스가 부착된다.

el속성에 인스턴스가 부착되고 나면 인스턴스에 정의한 옵션 객체의 내용이 el 속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환된다.

data 속성의 message 값 Hello Vue.js!가 {{ message }}와 치환된다.
위의 코드가 아래처럼 변하는 것과 같다.

<div id="app">
	Hello Vue.js!
</div>

인스턴스의 유효 범위 확인

만약 인스턴스의 유효범위를 벗어나게 되면 어떻게 될까

<div id="app">
</div>
{{ message }}

이렇게 되면 message의 속성값이 Hello Vue.js!로 바뀌지 않고 그대로 출력된다. 그대로 {{ message }}를 출력

뷰 인스턴스 라이프 사이클

인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다.
각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클(hook)이라고 한다.

created, beforeCreate, beforeMount, mounted, beforeUpdate, updated, beforeDestory, destroyed 총 8개

라이프 사이클의 단계는 크게 네가지로 나뉜다.
1. 생성
2. 부착
3. 갱신
4. 소멸

부착 -> 갱신 구간은 데이터가 변경되는 경우에만 거치게 된다.

beforeCreate

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

created

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

beforeMount

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

render() 자바스크립트로 화면의 돔을 그리는 함수.

mounted

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

beforeUpdate

el 속성에서 지정한 화면 요소에 인스턴스가 부탁되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다.
치환된 갓ㅂ은 뷰의 반응성을 제공하기 위해 $watch속성으로 감시. 이를 데이터 관찰이라 함

updated

데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계.
데이터 변경으로 인한 화면 요소 변경까지 완료된 시점, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋음.
이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와같은 속성을 사용해야 함.