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

<Discount /> 할인 배너를 2초 후에 자동으로 사라지게 하는 기능을 만들어보자.

이때 알아야 하는 개념이 Lifecycle 

컴포넌트는 웹페이지에 표시되기까지 일련의 step을 거친다. 그 step을 라이프사이클이라고 한다.

create 단계 -> mount 단계 -> 컴포넌트 생성 -> update 단계 -> unmount 단계

Lifecycle Hook을 걸어서 중간에 원하는 코드를 실행 가능하다. 

1. 컴포넌트를 보여줄 때 create -> mount 이 단계로 생성됩니다. 
     create는 데이터생성, mount는 index.html 파일에 장착 이렇게 생각하시면 됩니다. 
2. 데이터가 바뀌어서 컴포넌트가 재렌더링될 때는 update 단계를 거치며
3. 다른 페이지로 이동하거나, 컴포넌트가 삭제될 때는 unmount 라는 단계를 거칩니다.

이 단계들 중간중간에 코드를 실행시키고 싶을 때가 있습니다. 
예를 들면 mount 되기 전에 ajax 요청으로 서버에서 데이터를 가져온다거나,
update 되기 전에 코드를 실행해서 데이터를 검증해본다거나 할 때 입니다.

그럴 때 lifecycle hook 을 골라서 쓰면 됩니다. 

 

이제 2초 후에 사라지는 배너를 만들어보자.

 data() {

    return {

      showDiscount : true,

      원룸들오리지널 : [...data],

      오브젝트 : { name:'kim' , age:20 },

      누름 : 0,

      원룸들 : data,

      modalOpen : false,

      신고수 : [0,0,0],

      메뉴들 : ['Home', 'Shop', 'About'],

      products : ['역삼동원룸', '천호동원룸', '마포구원룸']

    }

  },

--> 먼저 showDiscount라는 데이터를 생성하여 false가 되면 배너가 사라지게 UI를 구성한다.

<Discount v-if="showDiscount == true" />

 

  mounted() {

    setTimeout(function(){

     

    }, 2000);

  },

--> 그 다음 App.vue가 mount 되고 나서 안의 코드를 실행해주세요. 라는 의미의 라이프사이클 훅을 사용한다. mounted()

  mounted() {

    setTimeout(()=>{

      this.showDiscount = false;

    }, 2000);

  },

--> this를 사용할 때는 ()=>{} 을 사용해주자.

이렇게 하면 할인 배너가 2초 뒤에 자동으로 사라진다.

 

출처 : 코딩애플