현재 프로젝트 구조
- 위 사진의 형태는 매우 간단한 body - dialog 구조이고 현재 나는 dialog의 input 까지 component화 시켜놓은 상태이다.
- index.vue가 todo 전체를 보여주고 있고 해당 vue 아래에는 Body.vue -> dialog.vue -> ui-input.vue 등으로 구성
컴포넌트를 각각 나눴을 경우 생기는 에로사항
- 데이터를 아래로, 아래로 , 아래로 계속 넘겨야한다.
- 위 문제 때문에 vuex를 사용하는 것을 적극 고려하게 되었다.
// index.vue
<div class="todo-dialog">
<Dialog @onClosed="onClickAccept" :dataDto="dataDto" :key="dataDto.rendererKey"></Dialog>
</div>
// dialog.vue
<div class="row-dialog">
<UiDialog @onClosed="onClickAccept">
<template #main>제목이에요</template>
<template #content>
<UiInput :someValue="dataEntity.title" :method="getTitle" data-cy="todo__dialog__input--title"></UiInput>
</template>
<template #title>
<UiInput :someValue="dataEntity.body" :method="getBody" data-cy="todo__dialog__input--content"></UiInput>
</template>
</UiDialog>
</div>
- 위 구조를 보면 index에서 dataDto를 건네주고 이를 다시 아래 UiInput으로 건네주고 있다.
- 문제는 props로 건네준 dataDto를 dataEntity로 동기화를 해줘야하는데 동기화가 안되는 문제 발생
- 그래서 생각해낸 방법은 UiInput에 각 value를 watch하는 애를 만드는 것.
watch:{
someValue(oldValue, newValue){
this.value = oldValue
}
},
- 아직도 왜 제대로 값이 안 바뀌는지 모르겠다.