컴포넌트 동적 렌더링

...
    <button @click="setSelectedComponent('active-goals')">active button</button>
    <button @click="setSelectedComponent('manage-goals')">manage button</button>
    <active-goals v-if="selectedComponent==='active-goals'"></active-goals>
    <manage-goals v-if="selectedComponent==='manage-goals'"></manage-goals>
...

• 만약 위와같은 코드가 있다고 가정하자. 지금은 조건이 2개밖에 없어서 짧지만 규모가 커진다면 동적으로 렌더링할 때 작성해야하는 코드가 2n으로 늘어날 것이다. 이를 방지하고자 나온 Vue 기능이 바로 <component> 이다.

<component>

...
	<component :is="selectedComponent"></component>
...
<script>
	componetns:{
    	ActiveGoals
        ...
    },
	data(){
    	selectedComponent : 'active-goals' // 그냥 초기화만 해줌
    },
    methods:{
    	setSelectedCompoent(cmp){
        	...
        }
    }
</script>

• 당연하게도 v-bind: 나 축약어 :로 동적으로 바인딩해줘야 의미가 있기 때문에 <component>는 항상 :is 속성값을 갖고 있다고 생각하면 된다.

• tab을 만드려면 emit 으로 마크업에서 받은 컴포넌트 문자열을 인수로 올려서 부모 컴포넌트에서 해당 컴포넌트를 렌더링하면 된다.

<keep-alive>

• 만약 당신이 <input>혹은 <textarea> 에 입력을 하다말고 다른 요소를 클릭하여 잠깐 DOM Tree에서 unmount 되었다가 다시 mount되면 입력되어있던 값이 모두 사라진다. 사용자는 이를 원하지 않을 수 있다. 그래서 나온 컴포넌트가 바로 <keep-alive> 컴포넌트이다.

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

• keep-alive로 동적 컴포넌트를 감쌀 수 있다. <keep-alive>는 동적 컴포넌트 개념으로 <component> 컴포넌트와 함께 동작한다.

• 이름 그대로 <keep-alive>는 컴포넌트를 완전히 제거하지 않고 이들의 상태를 내부에서 캐시로 저장하도록 Vue에 알려준다.
  따라서 <keep-alive>를 추가하여 새로고침하면 새로운 텍스트를 입력하고 다른 컴포넌트에 갔다가 다시 돌아와도 여전히 텍스트를 볼 수 있다.