hands on vue3 - component 데이터를 삭제 방지를 위한 keep alive 태그를 알아보자

[목표]

1. component는 상태에 따라 변경된다. 변경되면서 component 요소가 삭제되고 재 생성이 되는데 그때마다 데이터가 사라진다. 

 

아래는 그 예시다.

Show Active Goals를 눌러

만들어진 컴포넌트 안에서 

Hello World를 썼다.

 

이번엔

Show Manage Goals버튼 클릭 - > 다시 Show Active Goals 버튼 클릭

리로드를 하지도 않았는데 ... 데이터가 사라졌다.

 

이유는 다음과 같다.

 

컴포넌트 하나의 태그로

상태에 따라 변동된다. 

 

따라서 버튼을 누를 때 마다 컴포넌트가 바뀐다.

 

바뀐다는 것은 컴포넌트가 삭제되고 재 생성된다.

 

그래서 데이터가 없어지는 것..

 

하지만 

이 데이터를 캐시에 넣어서 임시로 계속 쓸 수 있게 할 수 있다.

 

그것이 keep-alive 태그다.

 

다음은 

keep-alive를 적용한 결과다.

 

 

---

[App.vue]

<template>
  <div>
    <the-header></the-header>
    <!-- <badge-list></badge-list>
    <user-info
      :full-name="activeUser.name"
      :info-text="activeUser.description"
      :role="activeUser.role"
    ></user-info>
    <course-goals>
      <template #default="goalUsingInApp">
        <h2>
          {{goalUsingInApp.goal}}은 Parent에서 작성한 것이다.
        </h2>
      </template>
    </course-goals> -->
    
    <button @click="setComponent('ActiveGoals')">Show Active Goals</button>
    <button @click="setComponent('ManageGoals')">Show Manage Goals</button>
    <keep-alive>
      <component v-bind:is="activeComponent"></component>
    </keep-alive>

    <!-- <active-goals v-if="isActive == true"></active-goals> -->
    <!-- <manage-goals v-if="isManage == true"></manage-goals> -->
  </div>
</template>

<script>
import TheHeader from './components/TheHeader.vue';
// import UserInfo from './components/UserInfo.vue';
// import BadgeList from './components/BadgeList.vue';
// import CourseGoals from './components/CourseGoals.vue';
import ActiveGoals from './components/ActiveGoals.vue';
import ManageGoals from './components/ManageGoals.vue';

export default {
  components: {
    TheHeader: TheHeader, //TheHeader -> the-header 로 vue가 알아서 변경해줌. 라인3번보면 케밥케이스로 되어있는데 잘못된 게 아님!
    // UserInfo: UserInfo,
    // BadgeList: BadgeList,
    // CourseGoals:CourseGoals,
    ManageGoals:ManageGoals,
    ActiveGoals:ActiveGoals,
  },
  data() {
    return {
      activeUser: {
        name: 'Maximilian Schwarzmüller',
        description: 'Site owner and admin',
        role: 'admin',
      },
      isManage: false,
      isActive: false,
      activeComponent: '',
    };
  },
  methods: {
    setComponent(cmt){
      this.activeComponent = cmt;
    }
  }
};
</script>

<style>
html {
  font-family: sans-serif;
}

body {
  margin: 0;
}
</style>