TIL#110 Vue.js (2)

11592 단어 TILJavaScriptvue.jsJavaScript

뷰 인스턴스

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

...
<body>
  <div id='app'>
    {{ message }}
  </div>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    });
  </script>
</body>
...

new Vue()로 인스턴스를 생성하고 이때 Vue 를 생성자라고 한다. 뷰로 개발을 할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서이다.

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

뷰 인스턴스 옵션 속성

인스턴스를 생성할 때 재정의할 data, el, template 등의 속성이다. el속성은 뷰로 만든 화면이 그려지는 시작점을 의미한다. 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야 한다.
template: 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음
methods: 화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면동작과 관련된 로직을 추가할 수 있음
created: 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성.

뷰 인스턴스 유효 범위

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

인스턴스 생성 후 화면에 인스턴스 옵션 속성을 적용하는 과정
뷰 라이브러리 파일 로딩 -> 인스턴스 객체 생성(옵션 속성 포함) -> 특정 화면 요소에 인스턴스를 붙임 -> 인스턴스 내용이 화면 요소로 변환 -> 변환된 화면 요소를 사용자가 최종 확인

뷰 인스턴스 라이프 사이클

인스턴스의 상태에 따라 호출할 수 있는 속성들을 의미한다. 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅이라고 한다. 라이프 사이클 속성에는 인스턴스의 생성, 변경, 소멸과 관련되어 총 8개가 있다.

beforeCreate
인스턴스 생성 후 가장 처음으로 실행되는 단계.
data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없음
created
data 속성과 methods 속성이 정의되었기 때문에 this.data 또는 this.fetchData() 같은 로직들을 이용하여 data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있음. 다만 인스턴스가 화면요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없음
beforeMount
render() 함수가 호출되기 직전의 로직을 추가하기 좋음
mounted
화면 요소를 제어하는 로직을 수행하기 좋은 단계. 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있음
beforeUpdate
치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시(데이터 관찰). 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있음
✏️ 뷰의 반응성 : 뷰의 특징 중 하나로 코드의 변화에 따라 화면이 반사적으로 반응하여 빠르게 화면을 갱신하는 것
updated
데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계. 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed , watch 와 같은 속성을 사용해야 함.
beforeDestroy
뷰 인스턴스의 데이터를 삭제하기 좋은 단계
destroyed
뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴됨

뷰 컴포넌트

조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미한다. 화면을 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 훨씬 편리하고 다른 사람이 작성한 코드를 직관적으로 이해할 수 있다.

웹 화면을 구성할 때 흔히 사용하는 내비게이션 바, 테이블, 리스트, 인풋박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리한다.

컴포넌트 등록

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

전역 컴포넌트 등록

뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다. 

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

컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미한다.
컴포넌트 태그가 실제 화면의 HTML 요소로 변활될 때 표시될 속성들을 컴포넌트 내용에 작성한다. template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.

지역 컴포넌트 등록

인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다.

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

뷰 컴포넌트 통신

상위 / 하위 컴포넌트 관계

컴포넌트는 각각 고유한 유효 범위를 갖고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없다. 가장 기본적인 데이터 전달 방법은 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법이다.

상위에서 하위 컴포넌트로 데이터 전달하기

props 속성

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성.

// 하위 컴포넌트의 props 속성 정의
Vue.component('child-component', {
  props: ['props 속성 이름'],
  '속성정의'
});

// 컴포넌트 태그에 v-bind 속성 추가
<child-component v-bind:props 속성이름='상위컴포넌트의 data 속성'></child-component>

인스턴스에 새로운 컴포넌트를 등록하면 기존에 있는 컴포넌트는 상위컴포넌트가 되고 새로 등록된 컴포넌트는 하위 컴포넌트가 된다.

하위에서 상위 컴포넌트로 데이터 전달하기

이벤트 발생과 수신

// 이벤트 발생
this.$emit('이벤트명');

// 이벤트 수신
<child-component v-on:이벤트명='상위 컴포넌트의 메서드명'></child-component>

관계 없는 컴포넌트 간 통신 - 이벤트 버스

2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법이다. 이벤트 버스를 이용하면 상위-하위 관계가 아니라도 데이터를 한 컴포넌트에서 다른 컴포넌트로 전달할 수 있다.

// 이벤트 버스를 위한 추가 인스턴스 1개 생성
var eventBus = new Vue();

// 이벤트를 보내는 컴포넌트
methods: {
  메서드명: function() {
    eventBus.$emit('이벤트명', 데이터);
  }
}

// 이벤트를 받는 컴포넌트
methods: {
  created: function() {
    eventBus.$on('이벤트명', function(데이터) {
      ...
백준 15649. N과 M (1)로 알아보는 .join()
참조변수의 형변환

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage