집 >웹 프론트엔드 >JS 튜토리얼 >알아야 할 Vue 컴포저블 팁

알아야 할 Vue 컴포저블 팁

Susan Sarandon원래의: 2025-01-11 08:46:44583검색

Vue Composables Tips You Need to Know

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

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

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

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

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

여러 구성요소를 통한 프롭 드릴링 방지
관련되지 않은 구성요소 간 데이터 공유
명확한 메소드로 상태 업데이트 제어
대형 구성 요소를 더 작은 기능으로 분할
Vue Reactivity와 별도의 비즈니스 로직
동기 및 비동기 데이터를 하나의 기능으로 처리
함수 매개변수를 더욱 설명적으로 만들기
기본값으로 정의되지 않은 옵션 방지
필요에 따라 단순하거나 복잡한 값 반환
다른 논리 경로를 자체 기능으로 분리
반응형 및 원시 값을 일관되게 처리
참조 언래핑 단순화
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

edge Object define if for while require break using Property Event undefined function default this promise input idea everything

성명：

이전 기사：모든 웹사이트를 png로 바꾸는 방법다음 기사：모든 웹사이트를 png로 바꾸는 방법