[Vue3] composables 역할

개발을 하다보면 여러군데서 똑같이 유효성체크를 할 일이 생기는데
이번에 개발을 하면서 composables 모듈을 하나 말들어서 공통화 했음

composables란 재사용 가능한 로직(함수)을 분리해 놓은 모듈로  Composition API를 기반으로 재사용 가능한 함수들을 뜻한다. 이름에서 알 수 있듯이 여러 로직을 "조합(composition)" 할 수 있도록 구성된다.

composable을 만들 때 지켜야 할 규칙이 있는데
1. 반드시 setup() 함수에서 호출할 것
2. 컴포넌트 외부에서 선언될 것
3. 이름은 보통 use~ 형태로 
4. 반응형 데이터는 ref또는 reactive로 선언해서 반환

디렉토리는 아래와 같이 만들면 된다.
src/
├── composables/
│   ├── useCounter.ts
│   ├── useFetch.ts
│   ├── useFormValidation.ts

사실 나는 단순히 if 조건문에서 해당 밸리데이션만 체크하는 용이라서 setup() 함수에서 호출하진 않았다.
이렇게 되면 vue의 반응형 로직을 제대로 쓰진 않는건데 사실 반응형 사용하는 부분이 없으니까 무관!

아래는 이메일 형식 예시니 참고

// composables/useValidation.ts
export function useValidation() {
  function isValidEmail(email: string): boolean {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
  }

  return {
    isValidEmail
  }
}

<script>
import { useValidation } from '@/composables/useValidation'

const { isValidEmail } = useValidation()

const testEmail = 'user@example.com'

if (!isValidEmail(testEmail)) {
  console.warn('이메일 형식이 올바르지 않습니다.')
}

</script>