Vue에서 입력 데이터 변환을 처리하는 방법

다음은 웹 앱을 개발할 때 우리 모두가 가지고 있거나 실행하게 될 기능의 일부입니다.

사용자가 값을 변경할 수 있는 대화형 구성 요소가 있지만 값을 저장하는 방법과 사용자에게 표시하는 방법 사이에 약간의 불일치가 있습니다.

한 입 가득이었으니 구체적인 예를 들어 사용 사례를 더 잘 이해해 봅시다.

이미지의 흐림 정도를 제어하는 ​​슬라이더를 만들고 싶다고 가정해 보겠습니다. 이미지의 필터에 전달하는 블러 값은 0에서 8픽셀 사이여야 하며 십진수 값도 허용됩니다. 사용자를 위해 슬라이더가 대신 0에서 100% 사이의 값을 표시하고 변환을 직접 처리하기를 원합니다.



(대화형 버전은 original link을 확인하고 마지막에 보너스 예시를 확인하세요.)

이를 해결하는 일반적인 방법은 입력이 변경될 때마다 호출되는 메서드를 정의한 다음 인스턴스 변수를 다음과 같이 수정하는 것입니다.

<range-slider :value="percentageBlur" @input="sliderInput" />
<img
  src="https://placeimg.com/1000/480/arch"
  :style="`filter: blur(${blur}px)`"
/>

export default {
  data() {
    return {
      blur: 0, // Value in pixels, passed to the image blur filter
      percentageBlur: 0, // Value in percentages, passed to the slider
    };
  },
  methods: {
    sliderInput(value) {
      this.percentageBlur = parseInt(value);
      this.blur = (value / 100) * 8; // Converting from 0-100 to 0-8
    },
  },
};

위의 코드는 완벽하게 훌륭하고 예상대로 작동하지만 개인적으로 몇 가지 불편함을 수반한다는 점을 알아차렸습니다.

우선, 구성 요소가 더 복잡해지고 더 많은 메서드와 데이터 속성이 있으면 "블러 논리"를 처리하는 코드 부분이 이제 구성 요소 전체에 흩어져 있습니다. 데이터 섹션에 값이 있고 메소드 섹션에 값을 설정하는 코드가 있습니다. 별거 아닌 것처럼 보일 수 있지만 나중에 어떻게 구현했는지 기억이 나지 않을 때 파일에서 블러링을 처리하는 모든 위치를 추적하려고 애쓰게 될 것입니다.

두 번째로 입력 요소에 v-model를 사용할 수 없습니다. range-slider 구성 요소가 설치한 라이브러리에 있고 change 이벤트 대신 input 이벤트를 발생시킨 경우 설명서를 추적하고 코드가 작동하지 않는 이유를 확인해야 합니다. 반면 v-model는 자동으로 설정을 확인하고 올바른 이벤트를 래핑합니다. 또한 템플릿에 2개의 개별 인수 대신 단일v-model 인수가 있는 것이 더 보기 좋습니다.

구하기 위해 계산된 소품 가져오기/설정

위의 불편함을 해결하는 방법은 계산된 속성에 대한 대체 구문인 get/set을 사용하는 것입니다.

Vue 문서에 언급되어 있지만 많은 개발자가 이 구문을 알거나 사용하지 않습니다. 아마도 문서에서 언제 사용해야 하는지 완전히 지정하지 않았기 때문일 것입니다.

아직 모른다면 get/set은 다음과 같습니다.

computed: {
  myProp: {
    get() {
      // When you try to get the value this.myProp in your component
      // you will get the return of this function.
      return this.value;
    },
    set(value) {
      // When you set the value like: this.myProp = 10
      // the prop this.value will be set to 10
      this.value = value;
    }
  }
}

위의 코드는 본질적으로 this.value 소품 주위에 투명한 래퍼를 정의합니다.

더 흥미롭게 만들기 위해 이 새로운 지식을 이미지 블러링의 사용 사례에 적용해 보겠습니다.

<range-slider v-model="percentageBlur" />
<img
  src="https://placeimg.com/1000/480/arch"
  :style="`filter: blur(${blur}px)`"
/>

export default {
  data() {
    return {
      blur: 0, // Value in pixels, passed to the image blur filter
    };
  },
  computed: {
    percentageBlur: {
      get() {
        // Converts the 0-8 blur values to percentages
        return Math.round((this.blur / 8) * 100);
      },
      set(value) {
        // Converts the percentages to 0-8 values and assigns
        // them to the original blur
        this.blur = (value / 100) * 8;
      },
    },
  },
};

차이점이 보이시나요? 이제 흐림 변환 기능을 코드의 하나의 "단위"인 계산된 속성으로 묶을 수 있습니다. 이렇게 하면 v-model 지시문을 사용하여 템플릿을 정리할 수도 있습니다.