[Vue.js] 3. lifecycle hook 적용하기

티스토리 뷰

Web/Vue.js

[Vue.js] 3. lifecycle hook 적용하기

HAN_PY 2020. 11. 20. 14:15

0. 들어가면서

우리는 앞에서 버튼을 누르면 get요청으로 데이터를 불러와서 보여는 방식을 구현해 보았다. 가능하면 아래의 링크를 보고 오는 것을 추천한다.

han-py.tistory.com/273

[Vue.js] 2. 데이터 받기(get)

0. 들어가면서 우리는 앞에서 Vue를 설치하고 실행하는 방법과 Vue에 사용되는 문법에 대해 알아보았다. 궁금하면 아래의 주소를 따라가면 된다. 이제 배운내용을 바탕으로 적용을 해보자. han-py.ti

han-py.tistory.com

1. lifecycle hook

지금까지 Vue에 관한 코드를 작성하였다면 지금부터는 개념 이해를 해보자.

앞에서 구현한 것은 첫 페이지에는 아무것도 없고 버튼을 눌러야 data가 생긴다. 그렇다면, 누르지 않고 처음 페이지를 들어갔을 때 일정한 data를 보이게 하는 방법에 대해 알아보자.

우선은 아래의 그림을 보자.

위의 그림은 인스턴스가 어떤 흐름을 가지고 탄생하고 없어지는지를 알 수 있다. 우리가 코드에서 const app = new Vue라고 적는 이부분이 바로 뷰 인스턴스라고 할 수 있다. 위의 빨간 글씨가 있는 부분은 그 부분에서 끼어들기가 가능하다는 것이다.(코드를 통해 그 지점에서 무언가 action을 취할 수 있다.)

흐름을 보면 다음과 같다.

BeforeCreated(태어나기 전) → 데이터 관찰({} 안에 있는 내용)과 이벤트 초기화 → 태어남(created) →템플릿

→ 업데이트 DOM(화면) → 마운트(el:#app) → 데이터변환 → re-render(화면바뀜) → destroyed

흐름을 한줄로 정리하면, 탄생 후에 DOM 부착을 하고 반응을 한다.

즉, 우리는 앞에서 AJAX를 개념 없이 그냥 넣었지만, 지금 보면 위의 빨간 글씨 부분의 어디든 넣어도 된다는 것을 알게 됐다. 그리고 공식문서를 보거나 많은 커뮤니티에서는 AJAX를 탄생(created)하자마자 넣어 주는 것이 좋다고 말한다. 그렇다니 그렇게 한번 해보도록 하자. 그렇다면 created 부분에 어떻게 넣을까? 그냥 created를 쓰면 된다. 아랫부분을 참고해 보자. (전에 했던 코드에 created를 추가한 것이다.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .button-bottom {
            position: fixed;
            right: 10vw;
            bottom: 20vh;
        }
    </style>
    <title>Scroller</title>
</head>
<body>
    <div id="app">
        <div v-for="photo in photos">
            <h5>{{ photo.title }}</h5>
            <img :src="photo.thumbnailUrl" :alt="photo.title">
        </div>
        <button @click='getPhotos' class="button-bottom">GET PHOTOS</button>
    </div>

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

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                photos: [],
                page: 1,
            },
            methods: {
                getPhotos: function () {  
                    const options = {
                        params:{
                            _page: this.page++, // 기존값 가져와서 쓰고나서 1을 올린다//++page는 올리고 쓴다
                            _limit: 5,
                        }
                    }
                    this.page++ // 기존값 가져와서 쓰고나서 1을 올린다
                    axios.get('https://jsonplaceholder.typicode.com/photos', options)
                        .then((res) => { 
                            this.photos = [...this.photos, ...res.data] 
                        }) 
                        .catch(err => console.error(err)) 
                }
            },
            
            created: function (){
            // 초기화 이후 AJAX 요청을 보내기 좋은 Hook이 created이다.
                this.getPhotos()
            },
        })
        
    </script>

</body>
</html>

실행해보면 버튼을 누르지 않아도 설정한 값이 나타나는 것을 알 수 있다. 즉, 페이지를 로드가면서 함수 하나를 실행시킨 것이라고 생각하면 된다. 그렇다면 우린 함수를 만들어서 created 부분에 넣어준다면 다양하게 응용이 가능할 것이다.

'Web > Vue.js' 카테고리의 다른 글

[Vue.js] 5. computed 기초 정리 (0)	2020.12.07
[Vue.js] 4. scrollmonitor(무한스크롤) 적용하기 (0)	2020.12.05
[Vue.js] 2. 데이터 받기(get) (0)	2020.11.17
[Vue.js] 1. 시작하기 (0)	2020.11.04
[djang-vue연동] Vue.js 1. 설치부터 시작 (0)	2020.10.22

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

글 보관함

AI Platform / Web

티스토리 뷰