본문 바로가기
Web/Vue

Vue.js 개념 총정리(1) _특징,장단점,컴포넌트,라이프사이클

by 나비와꽃기린 2021. 1. 29.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

- 공식문서https://vuejs.org/v2/guide/

- 스타일가이드https://vuejs.org/v2/style-guide/

- 쿡북https://vuejs.org/v2/cookbook/

 

1.Vue.js

MVVM 패턴의 모델 레이어에 해당하는 화면단 라이브러리

바뀐 데이터를 DOM 다시 대입해줘야지만 화면에 변경점이 적용되는것이 일반적인 웹개발방식 이었다면..

데이터의 변화를 라이브러리에서 감지해서 화면에 그려주는 반응형을 지원하는 라이브러리가 바로 Vue.js 이다.

MVVM 모델,,뷰모델로 이루어진 패턴이며, 가장 알려진 MVC 모델,,컨트롤러로 이루어진 패턴이다.

MVVM 뷰모델을 지원함으로서 뷰가 필요한 데이터와 커맨드를 제공해준다.

뷰모델이란 뷰를 위한 모델이란 뜻으로 뷰는 뷰모델에 대해서만 알고 있으면 되고 외의 아키텍처에 대해서는 신경쓰지 않아도 된다.

(비즈니스 로직에서는 ViewModel 상태 데이터만 변경하면 즉시 View 반영된다)

(MVC에서의 뷰와 컨트롤러의 관계를 끊을 있으며 데이터바인딩으로 뷰모델에서의 속성이 변경되면 뷰에 바로 반영이 있다.)

2.Vue 특징

  • 키보드 입력 또는 마우스 클릭등과 같은 이벤트발생 Dom Listener 이벤트를 잡아서 자바스크립트의 이벤트를 변경해준다.
  • 이벤트가 변경되면 Data Bindings 이용해서 자바스크립트의 데이터가 변경되어 화면까지 동시에 반영된다. (반응성 - Reactivity)

3. Vue 장점

  • 학습곡선이 낮다.
  • Vue 컴포넌트기반의 프레임워크다. DOM 작은 단위로 쪼개어 개발하는 방식(최신개발동향)으로 유지보수와 재사용성이 높다.
  • MVVM 패턴으로 기존 jQuery 통한 DOM 조작이 더이상 필요하지 않다.
  • Angular 장점인 양방향 데이터 바인딩과 React 장점인 가상돔 기반 렌더링 특징을 모두 가진다.

양방향바인딩이란?

-화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는

단방향바인딩이란?

-상위컴포넌트에서 하위컴포넌트로 데이터가 전달되는 방식

 

4. 뷰인스턴스

인스턴스는 다음과 같이 생성할 있다.

new Vue();

인스턴스에서 사용할 있는 속성과 API 다음과 같다.

new Vue({

    el:,         // 인스턴스가 그려지는 화면의 시작점 ( 특정 html 태그 )

    template :,  // 화면에 표시할 요소 ( html,css )

    date :,      // 뷰의 반응성 Reaactivity 반영되는 속성

    method :,    // 화면의 동작과 이벤트 로직을 제어하는 메소드

    created :,   // 뷰의 라이프사이클과 관련된 속성

    watch :,     // data에서 정의한 속성이 변화했을 추가 동작을 수행할 있게 정의하는 속성

    ... etc

})

 

5. 뷰컴포넌트

5.1 컴포넌트 등록 방법

뷰에 컴포넌트를 등록하는 방법은 전역과 지역 두가지가 있다.

전역컴포넌트는 여러 인스턴스에서 공통으로 사용할 있지만, 지역컴포넌트는 특정 인스턴스내에서만 유효한 범위를 갖는다.

5.2 전역컴포넌트

전역컴포넌트는 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다.

전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component() 호출하여 수행한다.

Vue.component('컴포넌트명',{(

 //컴포넌트내용 ( template, data, methods 인스턴스 옵션 속성을 정의 )

});

5.3 지역컴포넌트

인스턴스에 components 속성을 추가하여 등록한다.

new Vue({

  components : {

  }

})

5.4 전역컴포넌트와 지역컴포넌트 사용예제

<html>

  <head>

    <title>Vue Sample</title>

  </head>

  <body>

      <div id="app">

        <button>컴포넌트 등록</button>

        <my-component></my-component>

        <my-local-component></my-local-component>

      </div>

      <hr>

      <div id="app2">

        <button>컴포넌트2 등록</button>

        <my-component></my-component>

        <my-local-component></my-local-component>

      </div>

      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

      <script>

        Vue.component('my-component',{

          template: '<div>전역 컴포넌트가 등록되었습니다 !</div>'

        });

  

        var cmp = {

          template: '<div>지역 컴포넌트가 등록되었습니다 !</div>'

        }

  

        new Vue({

          el:'#app',

          components:{

            'my-local-component': cmp

          }

        });

  

        new Vue({

          el: '#app2'

        })

      </script>

  </body>

</html>

 

 

6. 뷰의 라이프사이클

6-1. 인스턴스 라이프 사이클이란?

인스턴스의 사태에 따라 호출할 있는 속성

인스턴스의 생성, 변경, 소멸과 관련되어 8개가 있다.

 

6-2. 라이프사이클 훅이란?

라이프 사이클 속성에서 실행되는 커스텀 로직

 

 

상단의 이미지는 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 소멸되기까지의 전체적인 흐름을 나타낸 인스턴스 라이프 사이클 다이어그램이다.

라이프사이클은 크게 4단계로 나뉜다

1.     인스턴스의 생성

2.     생성된 인스턴스를 화면에 부착

3.     화면에 부착된 인스턴스의 내용이 갱신

4.     인스턴스가 제거되는 소멸

 

메소드

설명

beforeCreate

·       인스턴스가 생성되고 나서 가장 처음 실행되는 라이프 사이클.

·       data, method 속성이 아직 인스턴스에 정의되어 있지 않다.

·       DOM과 같은 화면 요소에도 접근 불가하다.

created

·       data, method 속성이 인스턴스에 정의되어 있다.

·       정의된 값에 접근하여 로직을 실행할 수 있다.

·       다만화면에 부착 전이라 template 속성에 정의된 DOM 요소로 접근 불가하다.

·       서버에 데이터를 요청해 받아오는 로직을 수행하기 좋다.

beforeMount

·       template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후,
el 
속성에 지정한 화면 요소(DOM)에 인스턴스를 부착하기 전에 호출되는 단계
(render() : 
자바스크립트로 화면에 DOM을 그리는 함수)

·       render() 함수가 호출되기 직전의 로직을 추가하기 좋다.

mounted

·       el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계

·       template 속성에 정의한 화면 요소(DOM)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계

beforeUpdate

·       관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계

·       변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다.

updated

·       데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계

·       데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계

beforeDestroy

·        뷰 인스턴스가 파괴되기 직전에 호출되는 단계

·       아직 인스턴스에 접근할 수 있어서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다.

destroyed

·       뷰 인스턴스가 파괴되고 나서 호출되는 단계
(
정의한 모든 속성이 제거되고 하위 선언한 인스턴스들 또한 모두 파괴됨)