<script th:inline="javascript">
1. new Vue({
el: '#myTagCategory',
data: {
parameters: {
page: 1,
},
list: {
items: []
},
totalCount: '',
loadedCount: true,
},
1번은 뷰 인스턴스 생성후 element 요소 #myTagCategory로 위에 html의 id와 일치를 시켜준다.
그 이후 data값을 넣어야하는데 parameters를 통해서 페이지수와 pageSize를 할당해주고
list를 통해서 items배열을 만들어 DB에서 받아온 값을 바인딩 시켜주기위한 작업을 시작한다.
전체 데이터 건수 측정을 위해 totalCount를 초기화해준다.
2. mounted: function () {
this.initializeSearch();
},
2번은 Mounting 단계는 초기 렌더링 직전에 컴포넌트에 직접 접근 할 수 있다. 서버 렌더링에서는 지원하지 않는다.
초기 렌더링 직전에 돔을 변경하고자 한다면 이 단계를 활용할 수 있다. 그러나 컴포넌트 초기에 세팅되어야 할 데이터 페치는
created단계를 사용하는 것이 낫다.
생성,생성+활성화 에 대한 연결 유지 서버 측 렌더링 하는 동안 해당 데이터를 ,구성요소를 대신합니다.
mounted훅에서는 컴포넌트,템플리스렌더링된 돔에 접근할 수 있다. 모든 하위 컴포넌트가 마운트된 상태를 보장하지 않는다.
서버렌더링에서는 호출되지 않는다.
mounted훅에서 유의할 점은 , 부모와 자식 관계의 컴포넌트에서 우리가 생각한 순서대로 mounted가 발생하지 않는다.
즉, 부모의mounted훅이 자식의 mounted훅보다 먼저 실행되지 않는다. 오히려 자식먼저 그다음 부모 순서이다.
3. methods: {
3-1 initializeSearch: function () {
const self = this;
let param = {};
Object.assign(param, this.parameters);
(this.doSearch = function (page, requestCount = true) {
param.page = page;
if (requestCount) {
self.count(param);
}
self.load(param);
})(1);
},
3-2. doSearch: function (page) {
},
3-3. count: function (params) {
const self = this;
self.loadedCount = false;
3-4. if (!params) {
Object.assign(params, self.parameters);
}
axios.get("/api/service/myTagCategory/totalCount", {
params: params
}).then(function (response) {
const data = response.data;
if (!isNaN(parseInt(data))) {
self.totalCount = parseInt(data);
self.totalPage = Math.ceil(self.totalCount / params.pageSize);
self.loadedCount = true;
}
}).catch(function (error) {
console.log(error);
});
},
3번은 method를 사용한다. 처음에 3-1에서 initializeSearch 함수를 이용해서 현재 페이지값을 파라미터로 받아온다.
3-2번은 doSearch를 활용해 페이지 함수를 찾아 받아온다.
3-3번은 count함수를 사용해서 파라미터 값으로 로드된 수를 센다.-->? 근데 왜 false?
3-4번은 만약 파라미터 값이 없다면 자기자식 파라미터를 다시 할당하고
**axios로 데이터 값을 HTTP통신을 활용하여 url값을 get으로 매핑해서 데이터를 받아온다.
axios.get('URL주소') : 해당 URL을 get방식으로 요청
.then() : 반환값 로직 작성
.catch() : 오류 발생시 로직 작성
axios.get(url) 여기서 url은 controller에서 url매핑했을떄 데이터베이스가 들어있을 url으로 가서 매핑 즉, totalCount필요해서 마지막에 totalCount라고 써줌
.then여기서 response로 반환값 받아오고
const(상수) 고정 데이터를 response.data로 할당
만약 isNaN(parseInt(data)) 매개변수가 숫자인지 검사하는 함수(Not a Number) 가 아니면
self.해서 전체 건수(totalCount)넣어주고 totalPage,loadedCount(이거 해야되나)? 물어보기
.catch로 에러 생길거 받아올거 console.log(error)로 찍어주기
4. load: function (params) {
const self = this;
4-1. if (!params) {
Object.assign(params, self.parameters);
}
axios.get("/api/service/myTagCategory/lists", {
params: params
}).then(function (response) {
self.list.items = response.data;
}).catch(function (error) {
console.log(error);
});
},
4번은 load 함수를 이용해서 파라미터 값은 싣는다.
4-1번은 만약 파라미터가 없다면 자신의 파라미터를 할당한다.
axios.get('URL주소') : 해당 URL을 get방식으로 요청
.then() : 반환값 로직 작성
.catch() : 오류 발생시 로직 작성
5. onPageChange: function (page) {
this.parameters.page = page;
this.doSearch(page, false);
},
},
6. components: {
datepicker: common.datepicker.component(),
pager: common.pager.component()
}
});
</script>
Vue.js를 사용한다면, 라이프사이클 훅을 알고 있다고 생각한다. (라이프사이클 다이어그램)
그 중에서 created, mounted을 대부분 사용한다.
Vue 인스턴스 생성에 있어, 가장 먼저 호출되는 함수들로써, 스크립트로 보자면, window.onload 와 비슷한 느낌이 될 것이다.
created
인스턴스가 작성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다. 그러나 마운트가 시작되지 않았으므로 $el 속성을 아직 사용할 수 없습니다.
mounted
el이 새로 생성된 vm.$el로 대체된 인스턴스가 마운트 된 직후 호출됩니다. 루트 인스턴스가 문서 내의 엘리먼트에 마운트 되어 있으면, mounted가 호출 될 때 vm.$el도 문서 안에 있게 됩니다.
created와 mounted를 완벽히 이해하지 않아도, 사실상 크게 문제가 없을 수 있다.
하지만 규모가 커지면서, 컴포넌트간 통신이 있을 경우 문제가 발생할 수 있다.
부모에서 created 훅 안에서 값을 변경하는 것이 아닌 mounted에서 변경하는 것이다.
그렇다면, 처음에 초기화된 number값이 자식에 전달되고, 그 값을 통해 자식은 가지고 있다.
그리고 부모에서 mounted 훅이 일어나 값을 변경하기 때문에, 자식은 값이 변했다는 것을 인지하고 watch를 발생한다.
많은 경우 중 하나의 예로 들었지만, created와 mounted는 확실히 인지해야한다.
사용에 있어, 하나의 예로 created는 데이터 초기화에 대한 목적, mounted는 DOM 조작에 대한 목적으로 사용할 수 있다.
만약 이와 같이 예기치 못한 경우가 발생한다면, 라이프 사이클 훅에 의해 발생할 수 있으니, 확실히 이해해야한다.
출처: https://mygumi.tistory.com/201 [마이구미의 HelloWorld]
