[Vue] LifeCycle (라이프 사이클)

 

⚠️ 구체적인 라이플 사이클에 대한 설명과 관련 옵션은 공식 문서를 참고해 주세요. ⚠️

 

 

https://ko.vuejs.org/guide/essentials/lifecycle

Vue.js

https://ko.vuejs.org/api/options-lifecycle

Vue.js

---

 

https://ko.vuejs.org/guide/essentials/lifecycle

 

♾️ LifeCycle(생명 주기) 과정

컴포넌트 LifeCycle(생명 주기)는 아래와 같습니다.

• create
  : 컴포넌트가 생성되고 데이터가 초기화되는 단계입니다. 이 시점에는 아직 HTML이 생성되기 전이며, Vue 인스턴스가 초기화되고 데이터 및 이벤트 처리가 설정됩니다.
• mount
  : 컴포넌트가 화면에 표시되고 HTML이 생성된 후에 호출됩니다. 이 시점에는 Vue 컴포넌트가 실제로 DOM에 부착되어 사용자에게 보이게 됩니다.
• update
  : 컴포넌트가 업데이트되는 단계로, 데이터가 변경될 때 호출됩니다. 이 단계에서는 DOM이 다시 렌더링 됩니다.
• unmount
  : 컴포넌트가 제거되고, 관련 리소스들이 해제되는 단계입니다.

이 일련의 과정들 중간에 LifeCycle Hook(라이프 사이클 훅)을 사용하면 서버에 데이터를 요청하거나, 데이터에 따라 스타일을 지정하거나, 텍스트를 변경하는 등 여러 가지 작업을 수행할 수 있습니다.

---

🤔 옵션 종류

생명 주기 옵션에는 아래와 같이 크게 생성/마운트/갱신/언마운트/에러 처리 등으로 나뉘며

• Creation (생성)
  • beforeCreate
  • created
• Mounting (마운트)
  • beforeMount
  • mounted
• Updating (갱신)
  • beforeUpdate
  • updated
• Unmounting (언마운트)
  • beforeUnmount
  • unmounted
• Error Handling (에러 처리)
  • errorCaptured
• 등등

---

🖥️ 문법 (예시)

<template>
  데이터 불러오는 중...
</template>

<script>
export default {
  import axios from "axios";

  name: "App",
  data() {
    return {
      percent: 30,
    };
  },
  created() { // or mounted()
  	this.fetchData();
  },
  methods: {
    // mounted에서는 직접적으로 async/await를 사용하여 비동기 처리를 해줄 수 없기 때문에 method로 분리해야 합니다.
  	async fetchData() {
        await axios
          .get("server url")
          .then((res) => {
            console.log("데이터 불러왔어요", res)
          })
          .catch((error) => {
            console.error("에러 발행 : ", error)
          });
    };
  };
};
</script>

<style></style>