[Udemy Vue 완벽가이드 Section9] 119. 동적 컴포넌트를 활성 상태로 유지하기

동적 컴포넌트에 대해 더 알아야 할 내용이 있다.

 

ManageGoals.vue 파일에 입력필드가 있다고 해보자. 그리고 그 입력필드에 유저가 goal를 입력할 수 있다고 가정하자.

(dummy input 필드로서 이 값으로 뭔가를 하지는 않을 예정.)

<!--ManageGoals.vue-->
<template>
 <div>
  <h2>Manage Goals</h2>
  <input type='text' />
 </div>
</template>

유저가 하나 이상의 컴포넌트에서 뭔가를 입력할 수 있는 상황은 충분히 있을 수 있다.

 

이제 component태그로 컴포넌트를 동적으로 불러오자.

 

여기서 문제가 발생한다.

ManageGoals.vue 컴포넌트에 있는 입력필드에 입력값을 입력하고, 저장하기 전에 ActiveGoals.vue로 이동한 다음, 다시 ManageGoals.vue로 오면 입력한 값이 사라진다.

▼

▼

 

왜냐하면 component 요소로 컴포넌트를 바꿀 때 이전 컴포넌트는 DOM에서 제거되기 때문. 따라서 탭으로 컴포넌트를 바꾸면 입력필드가 DOM에서 제거되므로 입력 필드에 넣은 모든 값이 사라진다.

 

이건 우리가 원하는 방식이 아니다.

Vue가 제공하는 해결책 → 또 다른 내장 컴포넌트인 keep-alive 컴포넌트.

keep-alive로 동적 컴포넌트를 감쌀 수 있다.

<keep-alive>
 <component :is="selectedComponent"></component>
</keep-alive>

 

keep-alive는 동적 컴포넌트 개념으로 component 컴포넌트와 함께 동작한다.

이름이 보여주는대로, keep-alive는 컴포넌트를 완전히 제거하지 않고 이들의 상태를 내부에서 캐시로 저장하도록 Vue에 알려준다.

따라서 keep-alive를 추가하여 입력필드에 입력값을 적고, Active Goals로 갔다가 다시 Manage Goals로 돌아와도 여전히 입력값을 볼 수 있다.

내부에서 이 텍스트는 완전히 지워지지 않고 Vue가 해당 정보를 가지고 있어서 내용이 지워지지않게 만들어준다.

 

keep-alive의 적용 여부는 구축하는것에 따라 달라지지만, 이 기능을 알고 있는 것은 유용하다.

▼

▼

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.