알아야 할 Vue 컴포저블 팁

Vue 컴포저블은 놀라울 정도로 강력하지만 주의하지 않으면 금방 지저분해지고 유지 관리가 어려워질 수 있습니다.

그래서 저는 더 훌륭하고 유지 관리하기 쉬운 컴포저블을 작성하는 데 도움이 되는 13가지 팁을 찾아냈습니다.

간단한 상태 관리 솔루션을 구축하든 복잡한 공유 로직을 구축하든 다음 팁이 도움이 될 것입니다.

• 스파게티 코드로 이어지는 일반적인 함정을 피하세요
• 테스트 및 유지관리가 더 쉬운 컴포저블 작성
• 더 유연하고 재사용 가능한 공유 로직 만들기
• 필요한 경우 점차적으로 Options API에서 Composition API로 마이그레이션하세요

배우게 될 팁은 다음과 같습니다.

1. 여러 구성요소를 통한 프롭 드릴링 방지
2. 관련되지 않은 구성요소 간 데이터 공유
3. 명확한 메소드로 상태 업데이트 제어
4. 대형 구성 요소를 더 작은 기능으로 분할
5. Vue Reactivity와 별도의 비즈니스 로직
6. 동기 및 비동기 데이터를 하나의 기능으로 처리
7. 함수 매개변수를 더욱 설명적으로 만들기
8. 기본값으로 정의되지 않은 옵션 방지
9. 필요에 따라 단순하거나 복잡한 값 반환
10. 다른 논리 경로를 자체 기능으로 분리
11. 반응형 및 원시 값을 일관되게 처리
12. 참조 언래핑 단순화
13. Options API에서 Composition API로 점진적으로 마이그레이션

각 패턴을 자세히 살펴보고 Vue 애플리케이션을 어떻게 개선할 수 있는지 살펴보겠습니다.

아래에 마음에 드는 팁을 댓글로 남겨주세요!

1. 여러 구성요소를 통한 프롭 드릴링 방지

데이터 저장소 패턴은 여러 구성 요소 레이어를 통해 소품과 이벤트가 전달되는 것을 방지하는 데 도움이 될 수 있습니다.

한 가지 상황은 끝없는 소품 드릴링과 이벤트 버블링을 통해 부모와 자식이 소통하는 경우입니다.

<!-- Parent.vue -->
<template>
  <!-- But many more layers of components -->
  <Child :user="user" @change="onUserChange" />
</template>

<script setup>
const user = ref({ name: 'Alice' })
function onUserChange(updatedUser) {
  user.value = updatedUser
}
</script>

소품과 이벤트가 구성 요소 계층 구조를 통해 앞뒤로 이동해야 하기 때문에 이로 인해 많은 복잡성이 발생합니다.

보다 간단한 해결책은 모든 구성 요소를 가져올 수 있는 공유 데이터 저장소를 만드는 것입니다.

import { reactive, toRefs } from 'vue'
const state = reactive({ user: { name: 'Alice' } })

export function useUserStore() {
  return toRefs(state)
}

2. 관련되지 않은 구성요소 간에 데이터 공유

데이터 저장소 패턴은 형제 또는 "사촌" 구성 요소가 직접적인 연결 없이 동일한 데이터를 공유해야 하는 경우에도 도움이 됩니다.

두 형제 모두 동일한 사용자 개체가 필요하지만 소품이나 이벤트에 대한 우아한 경로가 없다고 가정해 보겠습니다.

이로 인해 상위 또는 중복 상태를 통해 데이터가 어색하게 저글링되는 경우가 많습니다.

더 나은 접근 방식은 두 형제가 모두 사용할 수 있는 단일 컴포저블 스토어를 사용하는 것입니다.

// SiblingA.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

// SiblingB.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

3. 명확한 방법으로 상태 업데이트 제어

데이터 저장소 패턴은 공유 상태를 업데이트하기 위한 명확한 방법 제공을 권장합니다.

일부 개발자는 다음과 같이 전체 반응 객체를 세상에 노출합니다.

<!-- Parent.vue -->
<template>
  <!-- But many more layers of components -->
  <Child :user="user" @change="onUserChange" />
</template>

<script setup>
const user = ref({ name: 'Alice' })
function onUserChange(updatedUser) {
  user.value = updatedUser
}
</script>

이를 통해 누구나 파일에서 직접 사용자의 darkMode 속성을 변경할 수 있으며, 이로 인해 산발적이고 제어할 수 없는 돌연변이가 발생할 수 있습니다.

더 나은 아이디어는 업데이트 발생 방식을 정의하는 함수와 함께 상태를 읽기 전용으로 반환하는 것입니다.

import { reactive, toRefs } from 'vue'
const state = reactive({ user: { name: 'Alice' } })

export function useUserStore() {
  return toRefs(state)
}

4. 큰 구성 요소를 더 작은 기능으로 나누기

인라인 컴포저블 패턴은 관련 상태와 로직을 더 작은 함수로 모아 대규모 구성요소를 분할하는 데 도움이 됩니다.

거대한 구성요소는 모든 참조와 메소드를 한 곳에 넣을 수 있습니다.

// SiblingA.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

// SiblingB.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

이러한 설정은 금방 관리할 수 없게 됩니다.

대신 인라인 컴포저블은 로직을 그룹화하여 로컬로 제공할 수 있습니다. 그런 다음 나중에 별도의 파일로 추출할 수 있습니다.

export const user = reactive({ darkMode: false })

5. Vue 반응성과 비즈니스 로직 분리

Thin Composables 패턴을 사용하면 원시 비즈니스 로직을 Vue 반응성과 분리하여 테스트와 유지 관리가 더 간단해집니다.

컴포저블에 모든 로직을 삽입할 수 있습니다.

import { reactive, readonly } from 'vue'
const state = reactive({ darkMode: false })

export function toggleDarkMode() {
  state.darkMode = !state.darkMode
}

export function useUserStore() {
  return {
    darkMode: readonly(state.darkMode),
    toggleDarkMode
  }
}

Vue 환경 내에서 로직을 테스트해야 합니다.

대신 순수 함수의 복잡한 규칙을 유지하고 컴포저블이 반응형 래퍼만 처리하도록 하세요.

<script setup>
const count = ref(0)
const user = ref({ name: 'Alice' })
// 500 more lines of intertwined code with watchers, methods, etc.
</script>

6. 하나의 기능으로 동기 및 비동기 데이터 모두 처리

Async Sync 컴포저블 패턴은 별도의 함수를 만드는 대신 동기 및 비동기 동작을 하나의 컴포저블로 병합합니다.

이것은 Nuxt의 useAsyncData 작동 방식과 같습니다.

여기에는 Promise를 반환하는 동시에 동기식 사용을 위한 즉각적인 반응형 속성을 제공할 수 있는 단일 컴포저블이 있습니다.

<script setup>
function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

const { count, increment } = useCounter()
</script>

7. 함수 매개변수를 더 설명적으로 만들기

옵션 개체 패턴은 단일 구성 개체를 예상하여 긴 매개변수 목록을 정리할 수 있습니다.

이와 같은 호출은 번거롭고 실수하기 쉬우며, 새로운 옵션을 추가하려면 함수 서명을 업데이트해야 합니다.

export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value = (count.value * 3) / 2
  }
  return { count, increment }
}

각 인수가 무엇을 의미하는지 명확하지 않습니다.

옵션 객체를 허용하는 컴포저블은 모든 내용을 설명적으로 유지합니다.

// counterLogic.js
export function incrementCount(num) {
  return (num * 3) / 2
}

// useCounter.js
import { ref } from 'vue'
import { incrementCount } from './counterLogic'

export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value = incrementCount(count.value)
  }
  return { count, increment }
}

8. 기본값으로 정의되지 않은 옵션 방지

옵션 개체 패턴도 각 속성에 대한 기본값을 권장합니다.

특정 필드가 존재한다고 가정하는 함수는 전달되지 않으면 문제가 될 수 있습니다.

import { ref } from 'vue'

export function useAsyncOrSync() {
  const data = ref(null)
  const promise = fetch('/api')
    .then(res => res.json())
    .then(json => {
      data.value = json
      return { data }
    })
  return Object.assign(promise, { data })
}

안전한 기본값을 사용하여 옵션을 구조화하는 것이 더 좋습니다.

useRefHistory(someRef, true, 10, 500, 'click', false)

9. 필요에 따라 단순하거나 복잡한 값을 반환합니다.

동적 반환 패턴을 사용하면 컴포저블이 간단한 사용 사례의 단일 값을 반환하거나 고급 제어 기능이 있는 확장된 객체를 반환할 수 있습니다.

일부 접근 방식은 항상 모든 항목이 포함된 객체를 반환합니다.

<!-- Parent.vue -->
<template>
  <!-- But many more layers of components -->
  <Child :user="user" @change="onUserChange" />
</template>

<script setup>
const user = ref({ name: 'Alice' })
function onUserChange(updatedUser) {
  user.value = updatedUser
}
</script>

주 반응 값만 필요한 사람은 추가 항목을 처리해야 합니다.

조건부로 단일 참조를 반환하는 컴포저블 또는 객체가 다음을 해결하는 경우:

import { reactive, toRefs } from 'vue'
const state = reactive({ user: { name: 'Alice' } })

export function useUserStore() {
  return toRefs(state)
}

10. 서로 다른 논리 경로를 자체 기능으로 분리

숨겨진 컴포저블 패턴은 동일한 컴포저블에서 상호 배타적인 로직이 혼합되는 것을 방지하는 데 도움이 됩니다.

일부 코드는 여러 모드 또는 코드 경로를 하나로 묶습니다.

// SiblingA.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

// SiblingB.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

각 경로를 자체 컴포저블로 분할하면 훨씬 더 명확해지고 기능에 영향을 주지 않습니다.

export const user = reactive({ darkMode: false })

11. 반응형 및 원시 값을 일관되게 처리합니다.

유연한 인수 패턴을 사용하면 컴포저블의 입력과 출력이 반응형 데이터 또는 원시 값으로 균일하게 처리되어 혼동을 피할 수 있습니다.

일부 코드는 입력이 참조인지 아닌지 확인합니다.

import { reactive, readonly } from 'vue'
const state = reactive({ darkMode: false })

export function toggleDarkMode() {
  state.darkMode = !state.darkMode
}

export function useUserStore() {
  return {
    darkMode: readonly(state.darkMode),
    toggleDarkMode
  }
}

대신 바로 전환이 가능합니다.

ref를 사용하면 입력이 ref이면 해당 ref가 반환됩니다. 그렇지 않으면 참조로 변환됩니다:

<script setup>
const count = ref(0)
const user = ref({ name: 'Alice' })
// 500 more lines of intertwined code with watchers, methods, etc.
</script>

12. 참조 언래핑 단순화

유연한 인수 패턴은 래핑 해제가 필요할 때 toValue도 사용합니다.

이 기능이 없으면 코드에서 isRef 검사를 계속 수행할 수 있습니다.

<script setup>
function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

const { count, increment } = useCounter()
</script>

전화하기가 훨씬 간단합니다.

export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value = (count.value * 3) / 2
  }
  return { count, increment }
}

13. Options API에서 Composition API로 점진적으로 마이그레이션

Composition Pattern 옵션을 사용하면 큰 Options API 구성요소를 쉽게 따라할 수 있는 점진적인 방식으로 단계별로 Composition API로 마이그레이션할 수 있습니다.

클래식 옵션 구성요소는 다음을 수행할 수 있습니다.

// counterLogic.js
export function incrementCount(num) {
  return (num * 3) / 2
}

// useCounter.js
import { ref } from 'vue'
import { incrementCount } from './counterLogic'

export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value = incrementCount(count.value)
  }
  return { count, increment }
}

데이터, 계산된 속성, 메서드가 분산되어 있습니다.

스크립트 설정으로 변환하면 함께 모아서 따라하기가 더 쉬워지며 다음 패턴을 사용할 수 있습니다.

import { ref } from 'vue'

export function useAsyncOrSync() {
  const data = ref(null)
  const promise = fetch('/api')
    .then(res => res.json())
    .then(json => {
      data.value = json
      return { data }
    })
  return Object.assign(promise, { data })
}

마무리

이 13가지 팁은 애플리케이션 전체에서 더 쉽게 유지 관리, 테스트, 재사용할 수 있는 더 나은 Vue 컴포저블을 작성하는 데 도움이 될 것입니다.

그러나 여기서는 단지 표면적인 부분만 살펴보겠습니다.

수년에 걸쳐 더 많은 패턴과 팁을 수집하여 구성 가능한 패턴에 대한 심층 과정에 모두 포함시켰습니다.

총 16개 패턴이 포함되어 있으며 각 패턴에는 다음이 포함됩니다.

• 심층 설명 — 사용 시기, 극단적인 경우 및 변형
• 실제 사례 — 이러한 간단한 사례를 넘어서 어떻게 사용하는지 확인할 수 있습니다
• 단계별 리팩토링 예시 — 이를 자신의 코드에 적용하는 방법을 확인할 수 있습니다

여기로 이동하여 자세히 알아보세요.

아 그리고 이 강좌는 1월 15일까지 세일중이라 지금 바로 엄청난 할인가에 득템하실 수 있어요!

컴포저블 디자인 패턴 확인

위 내용은 알아야 할 Vue 컴포저블 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!