[Vue] - 생명주기 훅

Vue.js에서 생명주기 훅(Lifecycle Hooks)은 컴포넌트의 생성, 렌더링, 업데이트, 소멸 등 다양한 단계에서 특정 동작을 수행할 수 있는 메서드입니다. 컴포넌트는 여러 가지 단계를 거치며 화면에 나타나고 없어지는데, 생명주기 훅은 이러한 단계에서 코드가 실행되도록 해 줍니다.

Vue 생명주기 훅의 주요 단계

1. beforeCreate

   • 컴포넌트가 초기화되기 전에 호출됩니다.
   • 아직 data, computed, methods, watch 등이 설정되지 않은 상태입니다.

   beforeCreate() {
     console.log('컴포넌트가 생성되기 전에 호출됨');
   }
   

2. created

   • 인스턴스가 생성된 후 호출됩니다.
   • data와 methods가 설정되고 접근 가능해집니다.
   • DOM에 접근할 수 없지만, 서버에서 데이터를 가져오거나 초기 설정에 적합한 훅입니다.

   created() {
     console.log('컴포넌트가 생성되었습니다.');
   }
   

3. beforeMount

   • 컴포넌트가 화면에 렌더링되기 직전에 호출됩니다.
   • 아직 DOM이 실제로 렌더링되지는 않았지만, 가상 DOM이 생성된 상태입니다.

   beforeMount() {
     console.log('컴포넌트가 마운트되기 전에 호출됨');
   }
   

4. mounted

   • 컴포넌트가 화면에 렌더링되고 나서 호출됩니다.
   • 실제 DOM에 접근할 수 있기 때문에 DOM 조작이 필요한 작업을 할 때 사용됩니다.

   mounted() {
     console.log('컴포넌트가 마운트되었습니다.');
   }
   

5. beforeUpdate

   • 데이터가 변경되어 DOM을 다시 렌더링하기 직전에 호출됩니다.
   • 컴포넌트의 상태는 최신이지만, DOM이 아직 갱신되지 않았습니다.

   beforeUpdate() {
     console.log('데이터가 업데이트되기 직전');
   }
   

6. updated

   • 데이터가 변경되고 DOM이 다시 렌더링된 후 호출됩니다.
   • DOM이 변경된 후 추가 작업이 필요할 때 사용합니다.

   updated() {
     console.log('데이터가 업데이트된 후 DOM이 갱신되었습니다.');
   }
   

7. beforeDestroy

   • 컴포넌트가 파괴되기 직전에 호출됩니다.
   • 이벤트 리스너를 제거하거나, 타이머나 구독을 해제할 때 유용합니다.

   beforeDestroy() {
     console.log('컴포넌트가 파괴되기 직전입니다.');
   }
   

8. destroyed

   • 컴포넌트가 파괴된 후 호출됩니다.
   • 컴포넌트의 모든 데이터 바인딩과 이벤트 리스너가 해제된 상태입니다.

   destroyed() {
     console.log('컴포넌트가 파괴되었습니다.');
   }
   

생명주기 훅 활용 예시

export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 인스턴스가 초기화되기 전');
  },
  created() {
    console.log('created: 인스턴스가 생성된 후');
  },
  beforeMount() {
    console.log('beforeMount: DOM이 마운트되기 전');
  },
  mounted() {
    console.log('mounted: DOM이 마운트된 후');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 데이터가 업데이트되기 전');
  },
  updated() {
    console.log('updated: 데이터가 업데이트된 후');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 컴포넌트가 파괴되기 전');
  },
  destroyed() {
    console.log('destroyed: 컴포넌트가 파괴된 후');
  }
};

이러한 생명주기 훅을 적절히 활용하면 컴포넌트의 다양한 상태 변화에 따라 동작을 제어할 수 있습니다.