[Vue 시작하기] Vue 의 구성

vue.js

---

1. Vue의 필수 요소

Vue 인스턴스 생성

Vue 인스턴스의 옵션

data	반응형 모델을 선언할때 사용, 즉 값이 변경될때 뷰에서 보이는 값도 같이 연동되어 변경되는것을 의미한다. 인스턴스가 생선된 후 this.$data로 접근할 수 있다. 또한 Vue인스턴스는 데이터 객체 내부의 값을 프락싱 하므로 this.$data.a와 this.a는 같은 값이다. 자바스크립트의 Object 자료형은 메모리에 저장된 값을 직접 가져오는 호출이 아닌 메모리에 저장된 주소 값을 가져오는 참조에 의한 호출이기 때문에 컴포넌트에서 data 속성을 일반 객체로 선언한다면 같은 주소를 참조하는 데이터들을 컴포넌트들이 공유하게 된다.
props	속성은 부모 컴포넌트로부터 데이터를 받아올 수 있게 노출된 속성들이다. HTML 요소의 어트리뷰트처럼 작성하여 값을 할당할수 있다.
computed	단어 그대로 계산된 데이터다. computed를 사용하지 않고도 인스턴스내에 자바스크립트 표현식을 이용하여 사용할 수 있다. (템플릿내에 자바스크립트 표현식을 여러번 해석해야 될경우 애플리케이션의 렌더 성능이 떨어지기도하고 가독성도 떨어진다.) computed 내부에서 사용된 데이터가 변경되면 자동으로 computed의 값도 갱신된다. 그리고 큰장점은 값이 한 번 계산되고 나면 캐싱된다는 점이다. computed 내부에서 사용된 데이터가 갱신되기 전에는 다시 계산되지 않으므로 함수를 선언해서 호출하는 방법보다 효율적이다.
methods	인스턴스에 추가되는 메소드이다. 선언된 메소드를 실행시킬때는 this를 통해 직접 접근하여 실행시키거나 디렉티브 표현식을 통해 사용할 수 있다. 선언된 모든 메소드는 this 컨텍스트를 Vue 인스턴스에 바인딩한다. 그렇기 때문에 만약 화살표 함수(Arrow function)를 사용하여 메소드를 정의하면 this가 현재 인스턴스가 아닌 부모 컨텍스트를 의미하게 되므로 메소드 내부에서 현재 인스턴스의 data나 props에 접근할 수 없게 된다는 점을 주의 해야한다.
watch	뷰 인스턴스 내의 데이터의 변화를 감지하며 특정 로직을 수행해야 할 때 주로 사용하는 감시자 속성이다. 비동기 처리 등과 같이 특정 로직을 처리하는 데 걸리는 소요 시간이 많을 경우 사용한다.

 

Vue2 인스턴스의 생명주기

• vue3 인스턴스 생명주기 참고 : https://learnvue.co/tutorials/vue-lifecycle-hooks-guide

1	beforeCreate	인스턴스가 생성될때 가장 처음으로 실행되는 훅이다. 아직 데이터와 이벤트는 아직 생성되지 않아 접근할 수 없는 단계이다.
2	created	beforeCreater가 호출된 직후 데이터와 이벤트가 초기화되어 created 훅에서는 데이터와 이벤트에 접근할 수 있다. 그러나 아직 DOM이 마운트 되지 않았으므로 인스턴스의 DOM에 접근하는 $el 속성을 사용할 수 없는 상태다. 주로 API 서버의 요청을 통해 애플리케이션에서 필요한 데이터를 받아올 때 해당 훅에서 받아온다.
3	beforeMount	컴포넌트에 접근할 수 있다. 말 그대로 아직 DOM에 마운트되지 않은 상태이기 때문에 아직은 $el 속성을 통해 인스턴스의 DOM에는 접근할 수 없는 단계이다.
4	mounted	인스턴스의 렌더와 DOM 마운트가 끝난 상태다. $el 속성을 사용하여 인스턴스의 DOM에 접근할 수 있게 된다. 만약 그래프와 같은 DOM관련 라이브러리를 사용하는 경우 해당 훅에서 DOM을 렌더하면 된다. 주의해야될점은 현재 인스턴스가 가지고 있는 자식 컴포넌트들까지 마운트가 끝난 상태를 의미하는건 아니다. 끝난 상태를 알고 싶다면 vm.$nextTick 메소드를 사용하여 전체 컴포넌트가 렌더된 상태를 보장할 수 있다.
5	beforeUpdate	컴포넌트가 마운트가 다 된 후, 데이터의 변화가 감지됐을 때 해당하는 데이터와 관련있는 DOM을 업데이트하기 전에 호출된다. 가상돔과 연관이 깊은 훅으로서, Vue.js는 데이터가 변경됨에 따라 변경된 데이터를 가상돔에 적용한다. 가상돔에 적용된 DOM을 렌더링하기 전에 호출되는 훅으로서, 이 과정에서 데이터가 변경되더라도 다시 렌더링이 되지는 않는다.
6	updated	가상 DOM이 재렌더링 되어 실제 DOM이 되었을 때 호출된다. 데이터가 변경된 후 DOM까지 모두 업데이트가 완료된 상태이므로 DOM에 접근하여 특정 로직을 수행하는 일이 가능하다. 주의해야될점은 모든 자식 컴포넌트들가 재렌더링 된 상태를 보장해주지는 않으므로 끝난 상태를 알고 싶다면 vm.$nextTick 메소드를 사용하여 전체 컴포넌트가 렌더된 상태를 보장할 수 있다. 뷰와 관련된 데이터를 다시 변경하는 코드를 작성해버리면 다시 DOM이 렌더링 되고 updated훅이 호출되는 무한루프에 빠질수 있다.
7	beforeDestory	Vue 인스턴스가 제거되기 전에 호출되는 훅이다. 아직 인스턴스가 제거되지 않은 상태이므로 this를 사용하여 해당 인스턴스에 접근하는 것이 아직 가능하다. 주로 인스턴스가 제거되기 전 인스턴스에 접근해서 수행해야 하는 코드를 작성할때 사용한다.(이벤트 초기화 등)
8	destroyed	Vue 인스턴스가 제거된 후에 실행되는 훅이다. 이미 제거 되었기 때문에 this를 사용하여 인스턴스에 접근하는 것 또한 불가능하며, 컴포넌트에 걸려있는 모든 이벤트가 해제된다.

2. Vue를 똑똑하게 사용하기

• 단일 파일 컴포넌트(Single File Component)
  • Vue 프레임워크만의 가장 큰 특징으로 단일 파일 컴포넌트를 지원한다.
  • 컴퍼넌트 하나의 파일 안에 HTML 템플릿, 스타일, 자바스크립트가 작성된 형식의 컴포넌트다.
• FIRST 원칙
  • Focused(단일 책임 원칙) : 단일 책임 원칙은 하나의 컴포넌트가 다 하나의 책임만을 가져야 한다는것을 의미한다.
  • Independent(독립적인) : 컴포넌트는 다른 컴포넌트와는 독립적으로 작동할 수 있어야 한다.
  • Reusable(재사용 가능한) : 컴포넌트는 어느 한 곳에서만 사용되는 것이 아니라 재사용될 수 있어야 한다.
  • Small(작은) : 컴포넌트를 작은 크기로 유지하며 복잡성이 줄어들어 유지보수성이 향상된다. 그렇기 때문에 너무 크고 복잡한 컴포넌트의 설계는 피하는 것이 좋다
  • Testable(테스트 가능한) : 컴포넌트는 테스트가 가능해야 한다. 여기서 말하는 테스트는 유닛테스트를 의미하며, 유닛테스트가 가능하다는 의미는 해당 컴포넌트가 가진 기능의 목적이 명확하다고 볼 수 있다.
• Focused(단일 책임 원칙)
  • 객체 지향 프로그래밍(oop)에서 이야기하는 설계 원칙중 하나로, 작성된 클래스는 하나의 기능만 가지며 그 클래스가 제공하는 멤버 변수, 멤버 함수(메소드)들은 그 하나의 기능을 수행하는 데만 집중해야 한다는 원칙이다.
• 가상 DOM의 원리
  • DOM을 추상화한 트리 구조로 DOM을 렌더링하는 과정에서 이러한 성능 저하가 발생하는 것을 최소화 하기 위해 고안된 방법이다.
• 범위 컴파일 사용하기
  • 외부에서 주입받는 템플릿으로 Vue가 제공해주는 내장 컴포넌트인 slot 컴포넌트와 속성을 통해 사용할 수 있다.

 

---

출처 : 커피 한 잔 마시며 끝내는 vue.js

- 공부하면서 정리한 내용입니다.