새로가는 프로젝트에서 뷰를 써야한대서 급 배우게 된 뷰
뷰?
UI화면 개발 방법 중 하나인 MVVM패턴의 뷰 모델에 해당하는 화면단 라이브러리
| 용어 | 설명 | |
| 뷰(View) | 사용자에게 보이는 화면 | |
| 돔(DOM) | HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터트리 | |
| 돔 리스너(DOM Listener) | 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 | |
| 모델(Model) | 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 JS 객체형태로 저장 | |
| 데이터바인딩(Data Binding) | 뷰에 표시되는 내용과 모델의 데이터를 동기화 | |
| 뷰 모델(View Model) | 뷰-모델 중간영역. 돔리스너와 데이터바인딩 제공 | |
MVVM ?
Model - View - ViewModel 패턴
마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴
컴포넌트 기반 프레임워크? 컴포넌트?
컴포넌트 == 레고블록이라고 생각하면 된다. 조합하여 화면을 구성할 수 있는 불록(화면의 특정영역)
코드 재사용성 높음
뷰 인스턴스?
뷰로 화면을 개발하기 위해 생성해야하는 필수 기본단위
new Vue ({
...
})new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 부른다.
생성자 사용이유 : vue 개발에 필요한 기능을 미리 정의한 후, 사용자가 그 기능을 재정의하여 편리하게 사용하기 위해
뷰 인스턴스 옵션속성
- data, el, template(화면표시 마크업 요소 정의속성), methods(화면 로직제어 관계 메서드 정의속성), created(인스턴스 생성시 바로 실행할 로직 정의속성) 등
- el 속성 사용시 선택자는 CSS규칙과 같음
인스턴스 유효범위
- el 속성범위 태그 아래에 오는 요소들로 제한됨
인스턴스 라이프 사이클
- 인스턴스 생성 > 화면 부착 > 내용 갱신 > 인스턴스 소멸
beforeCreate > Created > beforeMount > mounted > beforeUpdate > updated > beforeDestory > destroyed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Instance Lifecycle</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
},
beforeCreated: function(){
console.log("beforeCreate");
},
created: function(){
console.log("created")
},
mounted: function(){
console.log("mounted")
},
updated: function(){
console.log("updated")
}
})
</script>
</body>
</html>
콘솔창 확인 시 updated 속성 함수는 보이지 않는다.
이유 : updated 라이프 사이클 훅은 뷰 인스턴스에서 데이터 변경이 일어나 화면이 다시 랜더링 됐을 때 호출되는 로직이기때문
mounted (호출단계)에서 기존에 정의된 data속성의 message값을 변경하면?
updated도 콘솔에 출력된 것을 확인 할 수 있다.
'개발 > Javascript' 카테고리의 다른 글
| [React] 일기장 내용을 List형태로 랜더링한 후 개별 컴포넌트로 만들기 (0) | 2022.07.04 |
|---|---|
| [React] useRef import; DOM 조작하기 (0) | 2022.07.02 |
| [React] 사용자 입력 처리하기 - simplediary 프로젝트 시작 (0) | 2022.06.30 |
| [React] Props; 컴포넌트에 데이터 전달하기 (0) | 2022.06.29 |
| [React] state(상태) (0) | 2022.06.28 |