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

프로그래밍할 때 깔끔하고 효율적인 코드베이스를 유지하려면 공통 요소의 재사용을 용이하게 하는 방식으로 코드를 구성하는 것이 필수적입니다. 코드 중복은 코드베이스의 과도한 확장으로 이어질 수 있으며, 특히 더 광범위한 애플리케이션에서 디버깅 프로세스 중에 문제를 식별하고 해결하는 데 어려움을 초래할 수 있습니다.

Vue는 컴포저블을 통해 코드 재사용을 용이하게 합니다. 컴포저블은 논리적 연산을 포괄하는 기능으로, 프로젝트 전체에서 비슷한 기능을 효율적으로 처리하는 데 활용할 수 있습니다.

항상 컴포저블이었나요?

Vue 3에는 애플리케이션 전체에서 코드를 재사용할 수 있는 “컴포저블”이라는 새로운 기능이 도입되었습니다. 이 기능이 도입되기 전에는 개발자가 “믹스인”을 사용하여 데이터, 메서드 및 수명 주기 후크와 같은 다양한 요소를 그 안에 통합하여 코드를 공유했습니다. 이 접근 방식을 통해 수많은 컴포넌트에서 코드를 효율적으로 복제할 수 있었습니다.

믹스인은 독립형 엔티티로 생성할 수 있으며, ‘믹스인’과 같이 지정된 키 아래의 옵션 파라미터에 포함시켜 다양한 컴포넌트에 통합할 수 있습니다. 이 개념을 설명하기 위해 다음 예시를 살펴보겠습니다:

 // formValidation.js
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` 변수는 `formData`의 레이아웃을 반영하는 방식으로 구조화되어 있지만 사용자가 입력한 정보를 저장하는 대신 제출 프로세스 중에 발생할 수 있는 잠재적인 오류 메시지를 저장하는 역할을 하며, 마찬가지로 이 `formErrors`의 특정 인스턴스도 처음에 빈 슬레이트로 설정됩니다.

이 믹스인은 다른 함수 외에도 사용자 이름과 비밀번호의 입력 필드가 비어 있는지 여부를 확인하는 `validateForm()`이라는 메서드를 제공합니다. 이러한 필드 중 하나라도 비어 있으면 formErrors 속성에 적절한 오류 알림과 함께 로드됩니다.

Vue 애플리케이션에서 `VueFormErrors` 믹싱이 제공하는 기능을 활용하려면 해당 믹싱을 컴포넌트의 코드베이스로 가져온 다음 Options 객체 내에 ‘mixin’ 속성의 인스턴스로 통합해야 합니다.이 통합은 `formErrors` 변수에 콘텐츠가 없는 경우에만 원하는 결과를 산출하며, 이 시점에서 `isValid()` 메서드는 유효성 검사 성공을 나타내는 값을 반환합니다.

 <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 컴포넌트의 구현을 관찰합니다. 믹스인 속성은 가져온 모든 믹스인을 포함합니다. 특히, 이 컴포넌트는 formValidation 믹스인 내에 있는 validateForm 메서드를 사용하여 사용자에게 양식 제출의 결과, 즉 성공 또는 실패를 알립니다.

컴포저블 사용 방법

자바스크립트 프로그래밍 영역에서 컴포저블은 특정 요구 사항이나 목적에 맞는 사용자 정의 함수가 포함된 독립적인 모듈을 의미합니다. 컴포저블 환경 내에서 Vue의 컴포저블 API를 활용하면 반응형 데이터 바인딩 및 계산된 값의 기능을 활용할 수 있습니다.

이 인터페이스를 활용하면 다양한 요소와 원활하게 통합되는 함수를 개발할 수 있습니다. 이러한 함수는 엔티티를 생성하며, 컴포지션 API에서 제공하는 구성 단계를 통해 Vue 컴포넌트 내에서 손쉽게 가져오고 동화할 수 있습니다.

프로젝트 내에서 재사용 가능한 컴포넌트를 활용하려면 프로젝트의 “src” 디렉터리 내에 새로운 JavaScript 파일을 설정해야 합니다. 프로젝트의 범위가 광범위할 경우, “src” 디렉토리 내에 전용 하위 폴더를 지정하여 재사용 가능한 다양한 컴포넌트를 보관하는 것이 현명할 수 있습니다. 또한 이러한 개별 컴포저블 요소에 고유한 파일 이름을 지정하고, 각 제목은 해당 요소가 제공하는 특정 기능을 나타내는 것이 좋습니다.

“JavaScript 코드베이스 내에서 사용자 정의 함수를 정의하여 원하는 기능을 생성하고 구현하는 것이 필수적입니다.” 이 말이 더 적절하게 들립니까?

 // formValidation.js
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()`이라는 명명된 유틸리티 함수가 도입되어 있습니다. 후자는 Vue 프레임워크 내에서 양식 유효성 검사와 관련된 서비스의 내보내기 역할을 합니다.

이 코드는 ‘state’라는 반응형 속성을 정의하여 진행되며, 이 속성은 ‘formData’와 ‘formErrors’의 값을 저장합니다. 그 후, 제공된 믹스인에서 사용된 것과 매우 유사한 방법론을 사용하여 양식 유효성 검사를 수행합니다. 궁극적으로 `state` 변수와 `validateForm` 함수를 집계된 엔티티로 제공합니다.

특정 소스 파일에서 가져온 함수의 활용을 통해 알 수 있듯이 컴포넌트 내의 지정된 파일에서 자바스크립트 함수를 가져올 수 있습니다.

 <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>
 

활용된 폼 검증 컴파운드가 도입된 후, 이 특정 세그먼트는 추출된 자바스크립트 항목을 검사하고 폼 인증 프로세스를 계속 진행합니다. 이후 제출된 양식이 성공했는지 또는 유효성 검사 중에 문제가 발생했는지를 나타내는 알림이 생성됩니다.

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

Vue 컴포저블은 이전 버전의 프레임워크의 믹스인과 비교했을 때 Vue.js 프로젝트 내에서 기능을 재활용하는 개선된 방법을 제공합니다. 이러한 컴포넌트는 다양한 Vue.js 애플리케이션에서 추론을 활용하기 위한 체계적이고 유지 관리가 용이한 기술을 지원하므로 Vue를 사용하는 광범위한 웹 애플리케이션의 개발 프로세스를 간소화할 수 있습니다.