<div id="readability-page-1" class="page"><section id="container">
            



            <div><figure data-ke-mobilestyle="widthOrigin" data-origin-width="1080" data-origin-height="720"><span data-url="https://blog.kakaocdn.net/dn/shy3T/btsFfeMjmfP/M2cljQkl3OkOqQ9JbzWft0/img.jpg" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/shy3T/btsFfeMjmfP/M2cljQkl3OkOqQ9JbzWft0/img.jpg" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="705" height="470" data-origin-width="1080" data-origin-height="720"></span></figure>


<p data-ke-size="size16">created 라이프사이클 훅은 Vue 인스턴스가 생성된 직후에 호출되므로, 초기 데이터를 설정하거나 데이터를 불러오는 등의 작업을 수행하는 데 주로 사용됩니다. 아래는 created 훅의 일반적인 사용 사례입니다</p>


<h4 data-ke-size="size20">초기 데이터 설정</h4>

<p data-ke-size="size16">created 훅에서는 Vue 인스턴스의 데이터에 접근하고 변경할 수 있습니다. 따라서 인스턴스의 초기 상태를 설정하는 데 created 훅을 사용할 수 있습니다.</p>

<pre id="code_1708887727367" data-ke-language="html" data-ke-type="codeblock"><code>new Vue({
    data: {
        message: null
    },
    created: function () {
        this.message = 'Hello, Vue.js!';
    }
});</code></pre>



<h4 data-ke-size="size20">데이터 불러오기</h4>


<p data-ke-size="size16">created 훅에서는 외부 API를 호출하여 데이터를 불러오는 등의 비동기 작업을 수행하는 데 사용할 수 있습니다. 이 때 created 훅에서 반환된 Promise를 사용하여 데이터를 불러온 후에 추가 작업을 수행할 수 있습니다.</p>

<pre id="code_1708887779270" data-ke-language="html" data-ke-type="codeblock"><code>new Vue({
    data: {
        posts: null
    },
    created: function () {
        fetch('https://api.example.com/posts')
            .then(response =&gt; response.json())
            .then(data =&gt; {
                this.posts = data;
            });
    }
});</code></pre>


<h4 data-ke-size="size20">이벤트 리스너 등록</h4>

<p data-ke-size="size16">created&nbsp;훅에서는&nbsp;커스텀&nbsp;이벤트&nbsp;리스너를&nbsp;등록하는&nbsp;데&nbsp;사용할&nbsp;수&nbsp;있습니다.&nbsp;이&nbsp;때&nbsp;이벤트&nbsp;리스너는&nbsp;beforeDestroy&nbsp;또는&nbsp;destroyed&nbsp;훅에서&nbsp;제거되어야&nbsp;합니다.</p>

<pre id="code_1708887801779" data-ke-language="html" data-ke-type="codeblock"><code>new Vue({
    data: {
        windowWidth: window.innerWidth
    },
    created: function () {
        window.addEventListener('resize', this.onResize);
    },
    beforeDestroy: function () {
        window.removeEventListener('resize', this.onResize);
    },
    methods: {
        onResize: function () {
            this.windowWidth = window.innerWidth;
        }
    }
});</code></pre>


<p data-ke-size="size16">이와&nbsp;같이&nbsp;created&nbsp;훅은&nbsp;Vue&nbsp;인스턴스가&nbsp;생성된&nbsp;직후에&nbsp;필요한&nbsp;초기&nbsp;작업을&nbsp;수행하는&nbsp;데&nbsp;사용됩니다.&nbsp;그러나&nbsp;created&nbsp;훅에서는&nbsp;DOM에&nbsp;접근할&nbsp;수&nbsp;없으므로,&nbsp;DOM&nbsp;요소를&nbsp;조작해야&nbsp;하는&nbsp;작업은&nbsp;mounted&nbsp;라이프사이클&nbsp;훅에서&nbsp;수행해야&nbsp;합니다.</p>

</div>
            





<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="3250933968" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-VHBugUKpJ1qm98uW"></ins>



                    

                    



</section></div>

심재운 블로그

created 라이프사이클 훅은 Vue 인스턴스가 생성된 직후에 호출되므로, 초기 데이터를 설정하거나 데이터를 불러오는 등의 작업을 수행하는 데 주로 사용됩니다. 아래는 created 훅의 일반적인 사용 사례입니다
 
 
초기 데이터 설정
 
created 훅에서는 Vue 인스턴스의 데이터에 접근하고 변경할 수 있습니다. 따라서 인스턴스의 초기 상태를 설정하는 데 created 훅을 사용할 수 있습니다.
 
new Vue({
    data: {
        message: null
    },
    created: function () {
        this.message = 'Hello, Vue.js!';
    }
});
 
 
 
데이터 불러오기
 
 
created 훅에서는 외부 API를 호출하여 데이터를 불러오는 등의 비동기 작업을 수행하는 데 사용할 수 있습니다. 이 때 created 훅에서 반환된 Promise를 사용하여 데이터를 불러온 후에 추가 작업을 수행할 수 있습니다.
 
new Vue({
    data: {
        posts: null
    },
    created: function () {
        fetch('https://api.example.com/posts')
            .then(response => response.json())
            .then(data => {
                this.posts = data;
            });
    }
});
 
 
이벤트 리스너 등록
 
created 훅에서는 커스텀 이벤트 리스너를 등록하는 데 사용할 수 있습니다. 이 때 이벤트 리스너는 beforeDestroy 또는 destroyed 훅에서 제거되어야 합니다.
 
new Vue({
    data: {
        windowWidth: window.innerWidth
    },
    created: function () {
        window.addEventListener('resize', this.onResize);
    },
    beforeDestroy: function () {
        window.removeEventListener('resize', this.onResize);
    },
    methods: {
        onResize: function () {
            this.windowWidth = window.innerWidth;
        }
    }
});
 
 
이와 같이 created 훅은 Vue 인스턴스가 생성된 직후에 필요한 초기 작업을 수행하는 데 사용됩니다. 그러나 created 훅에서는 DOM에 접근할 수 없으므로, DOM 요소를 조작해야 하는 작업은 mounted 라이프사이클 훅에서 수행해야 합니다.

vue.js : created 라이프사이클, 어떤 용도일때 사용할까?

댓글