컴포저블을 사용하여 Vue.js에서 로직을 재사용하는 방법

프로그래밍할 때 가능한 경우 코드를 재사용할 수 있도록 코드베이스를 구조화하는 것이 중요합니다. 코드를 복제하면 코드베이스가 부풀어 오르고 디버깅이 복잡해질 수 있습니다. 특히 대규모 앱에서는 더욱 그렇습니다.

Vue는 컴포저블을 통해 코드 재사용을 단순화합니다. 컴포저블은 로직을 캡슐화하는 함수이며 프로젝트 전체에서 이를 재사용하여 유사한 기능을 처리할 수 있습니다.

항상 컴포저블이었나요?

Vue 3에 컴포저블이 도입되기 전에는 믹스인을 사용하여 코드를 캡처하고 애플리케이션의 다른 부분에서 재사용할 수 있었습니다. 믹스인에는 데이터, 메서드, 수명 주기 후크와 같은 Vue.js 옵션이 포함되어 있어 여러 구성 요소에서 코드를 재사용할 수 있습니다.

믹스인을 생성하려면 이를 별도의 파일로 구조화한 다음 구성 요소의 옵션 객체 내 mixins 속성에 믹스인을 추가하여 구성 요소에 적용합니다. 예를 들어:

 
export const formValidationMixin = {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      formErrors: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    validateForm() {
      this.formErrors = {};
  
      if (!this.formData.username.trim()) {
        this.formErrors.username="Username is required.";
      }
  
      if (!this.formData.password.trim()) {
        this.formErrors.password = 'Password is required.';
      }
   
      return Object.keys(this.formErrors).length === 0;
    },
  },
};

이 코드 조각은 양식 유효성 검사를 위한 믹스인의 내용을 보여줍니다. 이 믹스인에는 처음에 빈 값으로 설정된 두 가지 데이터 속성(formData 및 formErrors)이 포함되어 있습니다.

formData는 비어 있는 것으로 초기화된 사용자 이름 및 비밀번호 필드를 포함하여 양식에 대한 입력 데이터를 저장합니다. formErrors는 이 구조를 반영하여 잠재적인 오류 메시지를 보관하며, 초기에는 비어 있습니다.

믹스인에는 사용자 이름과 비밀번호 필드가 비어 있지 않은지 확인하는 메서드인 verifyForm()도 포함되어 있습니다. 두 필드 중 하나라도 비어 있으면 formErrors 데이터 속성이 적절한 오류 메시지로 채워집니다.

formErrors가 비어 있으면 이 메서드는 유효한 양식에 대해 true를 반환합니다. 믹스인을 Vue 구성요소로 가져와서 Options 객체의 mixin 속성에 추가하여 사용할 수 있습니다.

 <template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="formData.username" />
        <span class="error">{{ formErrors.username }}</span>
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="formData.password" />
        <span class="error">{{ formErrors.password }}</span>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
<script>
import { formValidation } from "./formValidation.js";
export default {
  mixins: [formValidation],
  methods: {
    submitForm() {
      if (this.validateForm()) {
        alert("Form submitted successfully!");
      } else {
        alert("Please correct the errors in the form.");
      }
    },
  },
};
</script>
<style>
.error {
  color: red;
}
</style>
 

이 예제는 Options 개체 접근 방식을 사용하여 작성된 Vue 구성 요소를 보여줍니다. mixins 속성에는 가져온 모든 믹스인이 포함됩니다. 이 경우 구성 요소는 formValidation 믹스인의 verifyForm 메서드를 사용하여 양식 제출이 성공했는지 사용자에게 알립니다.

컴포저블 사용 방법

컴포저블은 특정 문제나 요구 사항에 맞게 조정된 기능을 갖춘 독립형 자바스크립트 파일입니다. 참조 및 계산된 참조와 같은 기능을 사용하여 컴포저블 내에서 Vue의 구성 API를 활용할 수 있습니다.

구성 API에 대한 이러한 액세스를 통해 다양한 구성 요소에 통합되는 기능을 만들 수 있습니다. 이러한 함수는 Composition API의 설정 기능을 통해 Vue 구성 요소로 쉽게 가져오고 통합할 수 있는 객체를 반환합니다.

컴포저블을 사용하려면 프로젝트의 src 디렉터리에 새 자바스크립트 파일을 만듭니다. 대규모 프로젝트의 경우 src 내에 폴더를 구성하고 다양한 컴포저블에 대한 별도의 JavaScript 파일을 만들어 각 컴포저블의 이름이 해당 목적을 반영하는지 확인하는 것이 좋습니다.

JavaScript 파일 내에서 필요한 기능을 정의하십시오. 다음은 컴포저블로 formValidation 믹스인을 재구성한 것입니다.

 
import { reactive } from 'vue';
export function useFormValidation() {
  const state = reactive({
    formData: {
      username: '',
      password: '',
    },
    formErrors: {
      username: '',
      password: '',
    },
  });
  function validateForm() {
    state.formErrors = {};
    if (!state.formData.username.trim()) {
      state.formErrors.username="Username is required.";
    }
    if (!state.formData.password.trim()) {
      state.formErrors.password = 'Password is required.';
    }
    return Object.keys(state.formErrors).length === 0;
  }
  return {
    state,
    validateForm,
  };
}
 

이 스니펫은 vue 패키지에서 반응성 함수를 가져오는 것으로 시작됩니다. 그런 다음 내보낼 수 있는 함수인 useFormValidation()을 생성합니다.

계속해서 formData 및 formErrors 속성을 포함하는 반응 변수인 state를 생성합니다. 그런 다음 스니펫은 믹스인과 매우 유사한 접근 방식으로 양식 유효성 검사를 처리합니다. 마지막으로 상태 변수와 verifyForm 함수를 객체로 반환합니다.

구성요소의 파일에서 자바스크립트 함수를 가져와 이 컴포저블을 사용할 수 있습니다.

 <template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="state.formData.username" />
        <span class="error">{{ state.formErrors.username }}</span>
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="state.formData.password" />
        <span class="error">{{ state.formErrors.password }}</span>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
<script setup>
import { useFormValidation } from "./formValidation.js";
import { ref } from "vue";
const { state, validateForm } = useFormValidation();
const submitForm = () => {
  if (validateForm()) {
    alert("Form submitted successfully!");
  } else {
    alert("Please correct the errors in the form.");
  }
};
</script>
<style>
.error {
  color: red;
}
</style>
 

useFormValidation 컴포저블을 가져온 후 이 코드는 반환되는 자바스크립트 객체의 구조를 분해하고 양식 유효성 검사를 계속합니다. 제출된 양식이 성공했는지 또는 오류가 있는지 알려줍니다.

컴포저블은 새로운 믹스인입니다.

Vue 2에서는 코드 재사용을 위해 믹스인이 유용했지만 Vue 3에서는 컴포저블이 이를 대체했습니다. 컴포저블은 Vue.js 애플리케이션에서 로직을 재사용하기 위한 보다 구조화되고 유지 관리 가능한 접근 방식을 제공하므로 Vue로 확장 가능한 웹 앱을 더 쉽게 구축할 수 있습니다.