[Udemy Vue 완벽가이드 Section9] 120. 이론 적용하기 & 한가지 문제점

아주 유용한 기능을 하나 더 알아보자.

 

ManageGoals.vue 컴포넌트를 계속 사용해보자.

'Set Goal(목표설정)'이라는 텍스트가 적힌 button이 있고, 버튼을 클릭하면 input창에 입력한 goal을 저장하고 싶다.

그리고 input 필드를 확인하여, 비어있다면 오류 메시지를 유저에게 보여주자. 그리고 입력 필드에 적힌 값이 유효한 goal이라면 별다른 조치를 취하지 말자. (지금 다루는 건 오류와 오류 메시지 부분 뿐이므로.)

 

setGoal 메서드를 포인터로 가리키고, setGoal 메서드 내부에서 ref로 enteredValue를 얻을 수 있다. (또는 v-model과 양방향 바인딩으로도 가능하다. 이번에는 ref 개념을 사용해보자.)

input창의 ref에 원하는 식별자를 추가한다. (식별자를 'goal'로 지정함)

<input type="text" ref="goal" />

this.$refs를 이용하여 input요소에 접근할 수 있다. value를 입력하면 유저가 입력한 값을 받아온다.

만약 enteredValue가 빈 문자열이라면 오류메시지를 띄워야한다.

setGoal(){
 const enteredValue = this.$refs.goal.value; //input 입력값
 if(enteredValue === '') {
  alert('Input must not be empty!');
 }
}

내장된 alert는 그다지 보기 좋지 않다. 스타일링과 맞지 않을 가능성이 크다.

따라서 alert함수를 사용하는것을 추천하지 않는다.

대신, 알림을 위한 modal(오버레이 다이얼로그)을 직접 만드는게 낫다.

 

 

모달을 위해 ErrorAlert.vue 컴포넌트를 만들어보자.

내장된 dialog 요소를 사용한다. 이는 기본 HTML 요소이다.

내장된 dialog 요소를 표시하려면 open 속성이 필요하다.

전체 컴포넌트를 v-if로 DOM에 추가하고 제거하는 대신에, 항상 open 속성을 넣자. open이 없으면 동작하지 않는다.

<!--ErrorAlert.vue-->
<dialog open>
 <slot></slot>
</dialog>

그리고 slot을 통해 유연하게 만들수도 있다.

스타일로는 top: 20vh;를 주어서 화면 상단에서 20% 아래로 이동시켜 dialog가 중앙정렬이 되게끔 했다.

 

ManageGoals.vue 컴포넌트에서 만약 사용자가 입력한 값이 유효하지않으면 해당 dialog를 보여주고 싶다.

 

ErrorAlert.vue를 ManageGoals.vue에 지역 컴포넌트로 등록해보자.

<!--ManageGoals.vue-->
<template>
  <h2>Manage Goals</h2>
  <input type="text" ref="goal" />
  <button @click="setGoal">Set Goal</button>
  <error-alert v-if="inputIsInvalid">
    <h2>Input is invalid!</h2>
    <p>Please enter at least a few characters..</p>
    <button @click="confirmError">Okay</button>
  </error-alert>
</template>
<script>
import ErrorAlert from "./ErrorAlert.vue";
export default {
  components: {
    ErrorAlert,
  },
  data() {
    return {
      inputIsInvalid: false,
    };
  },
  methods: {
    setGoal() {
      const enteredValue = this.$refs.goal.value;
      if (enteredValue === "") {
        this.inputIsInvalid = true;
      }
    },
    confirmError() {
      this.inputIsInvalid = false;
    },
  },
};
</script>

이렇게 커스텀 overlay를 만들었다.

닫을 수 있게도 만들 수 있다.

 

slot의 개념이 왜 강력한지 보여준다.

오류가 발생하는 컴포넌트(ManageGoals.vue)에서 모든 것을 처리할 수있고, 해당 dialog에 대한 스타일링과 마크업은 완전히 다른 컴포넌트(ErrorAlert.vue)에서 처리할 수 있다.

 

책임을 분산하는 좋은 방식이라고 할 수 있다.

새로운건 없다. 알고 있으면 좋은 패턴일 뿐이다. 하지만 이렇게 구현하면 약간의 문제가 발생한다.

 

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