[Refactoring] Editable Text를 수정해보자

 

 

 

기존에 구현했던 Editable Text 컴포넌트를 수정해보았다..!

회고: 내가 왜이렇게 어렵게 했찌..? (어리둥절)

---

 

 

결과물

 

 

 

 

뭔가.. 옛날의 나는 입력받은 Text와 Input Box Text의 스타일도 다르고, 지금은 기억 안나는 또 다른 이유(가 있겟지..?)에 의해 아래의 코드를 작성했던 것 같다.

<template>
    <div>
        <span v-show="!onEdit" @click="onClickText">{{ defaultText }}</span>
            <VaInput
                v-show="onEdit"
                ref="refInput"
                :model-value="editText"
                :maxlength="maxLength"
                class="edit-input-box"
                @input="onInputText"
                @blur="onSaveText"
                @keyup.enter="onSaveText"
            ></VaInput>
    </div>
</template>

<script setup lang="ts">

interface Props {
	defaultText?: string,
}

const { defaultText = '편집' } = defineProps<Props>();

const onEdit = ref<boolean>(false);

const onClickText = () => {
	onEdit.value = true;
}

</script>

 

검토해 보자면...

• Props로 defaultText가 들어온다면, 기본 텍스트를 보여준다.
• 기본 텍스트 클릭 시, onClickText이벤트를 사용해서 onEdit의 값을 바꿔주고,
  onEdit이 true면 <VaInput></VaInput> 컴포넌트를 보여준다. ( 기본 텍스트는 숨김 )
• VaInput 컴포넌트의 이벤트 핸들링을 사용해서
  - input: 수정 텍스트 저장
  - blur: 텍스트 수정 완료
  - keyup.enter: 텍스트 수정 완료
  액션을 취한다.

머.. 이런 식으로 작성을 했었는데...

이렇게도 충분히 가능하지만 좀 더 콤팩트하게 수정을 했다..!

 

 

 

 

ㄹ

ㄹ

ㄹ

ㄹ

ㄹ

ㄹ

ㄹ