Q1: Vue.js에서 사용자 정의 훅이란 무엇인가요?
A1: Vue.js 사용자 정의 훅은 Composition API를 활용해 재사용 가능한 로직을 캡슐화한 함수입니다. 일반적으로 `use` 접두사를 붙여 명명하며, 여러 컴포넌트에서 동일한 상태나 기능을 공유할 때 사용됩니다.
Q2: Vue 3의 Composition API와 사용자 정의 훅은 어떻게 관련되나요?
A2: Composition API는 setup() 함수 내에서 상태와 로직을 선언하고 관리하는 방식입니다. 사용자 정의 훅은 이러한 로직을 함수 단위로 분리해 재사용성을 높이고 코드 중복을 줄이는 데 사용됩니다.
Q3: 사용자 정의 훅을 만드는 기본 구조는 어떻게 되나요?
A3:
```js
import { ref, computed, watch } from 'vue';
export function useMyCustomHook() {
const state = ref(initialValue);
function doSomething() {
// 로직 구현
}
return {
state,
doSomething,
};
}
```
위처럼 상태와 함수를 정의하고 객체 형태로 반환합니다.
Q4: 사용자 정의 훅에서 reactive와 ref 중 어떤 것을 사용해야 하나요?
A4: 간단한 원시 값은 `ref`를, 여러 속성을 가진 객체는 `reactive`를 사용하는 것이 일반적입니다. 훅 안에서 필요에 따라 적절히 선택하여 상태를 관리합니다.
Q5: 사용자 정의 훅에서 props나 context에 접근할 수 있나요?
A5: 훅은 독립적인 함수이므로 props나 context에 직접 접근하지 않습니다. 대신 훅 호출 시 인자로 필요한 값을 전달받아 사용합니다.
Q6: 사용자 정의 훅에서 생명주기 훅을 사용할 수 있나요?
A6: 네, `onMounted`, `onUnmounted` 등 생명주기 훅을 사용할 수 있으며, 훅 내부에서 필요한 로직을 설정할 때 유용합니다.
Q7: 사용자 정의 훅을 컴포넌트에서 어떻게 사용하나요?
A7: 컴포넌트의 `setup()` 함수 내에서 훅을 호출하고, 반환된 상태나 메서드를 사용합니다. 예:
```js
import { useMyCustomHook } from './useMyCustomHook';
export default {
setup() {
const { state, doSomething } = useMyCustomHook();
return { state, doSomething };
}
}
```
Q8: 사용자 정의 훅을 작성할 때 주의할 점은?
A8:
- 훅은 이름을 `use`로 시작해 명확히 식별합니다.
- 내부 상태를 외부에 불필요하게 노출하지 않도록 캡슐화합니다.
- 부작용을 적절히 관리하고, cleanup이 필요한 경우 생명주기 훅을 활용합니다.
Q9: Vue 2에서도 사용자 정의 훅을 만들 수 있나요?
A9: Vue 2는 기본적으로 Composition API를 지원하지 않지만, `@vue/composition-api` 플러그인을 설치하면 비슷한 패턴으로 훅을 만들 수 있습니다.
Q10: 사용자 정의 훅으로 어떤 종류의 로직을 분리하면 좋나요?
A10: API 호출, 폼 상태 관리, 이벤트 핸들링, 타이머 설정, 공통 계산 로직 등 컴포넌트 간 재사용이 필요한 상태 관리 로직이 훅 분리에 적합합니다.
Vue.js에서 사용자 정의 훅을 만드는 것은 Vue의 Composition API를 활용하여 재사용 가능한 로직을 캡슐화하는 좋은 방법입니다. 사용자 정의 훅은 일반적으로 `setup` 함수 내에서 사용할 수 있는 함수로, 상태 관리, API 호출, 이벤트 리스너 설정 등 다양한 기능을 포함할 수 있습니다. 아래에서는 Vue.js에서 사용자 정의 훅을 만드는 방법에 대해 단계별로 설명하겠습니다. 1. 사용자 정의 훅의 기본 구조 사용자 정의 훅은 일반적으로 JavaScript 함수로 정의됩니다. 이 함수는 Vue의 반응성 API를 사용하여 상태를 관리하고, 필요한 경우 다른 훅을 호출할 수 있습니다. ```javascript import { ref, onMounted, onUn<a href='https://sangseek.com/sangseeks/mounted/ko'>mounted</a> } from 'vue'; export function useCustomHook() { const data = ref(null); const fetchData = async () => { // API 호출 로직 const response = await fetch('https://api.example.com/data'); data.value = await response.json(); }; onMounted(() => { fetchData(); }); return { data, }; } ``` 2. 사용자 정의 훅 사용하기 사용자 정의 훅을 만든 후, 이를 Vue 컴포넌트에서 사용할 수 있습니다. `setup` 함수 내에서 훅을 호출하고, 반환된 값을 컴포넌트의 데이터로 사용할 수 있습니다. ```javascript <template> <div> <h1>Data from API:</h1> <pre>이중 중괄호 열기 data 이중 중괄호 닫기</pre> </div> </template> <script> import { useCustomHook } from './useCustomHook'; export default { setup() { const { data } = useCustomHook(); return { data, }; }, }; </script> ``` 3. 사용자 정의 훅에서의 반응성 관리 Vue의 반응성 시스템을 활용하여 상태를 관리할 수 있습니다. `ref`와 `reactive`를 사용하여 상태를 정의하고, 이를 컴포넌트에서 사용할 수 있습니다. ```javascript import { ref, reactive } from 'vue'; export function use<a href='https://sangseek.com/sangseeks/Counter/ko'>Counter</a>() { const count = ref(0); const increment = () => { count.value++; }; const decrement = () => { count.value--; }; return { count, increment, decrement, }; } ``` 4. 라이프사이클 훅 사용하기 사용자 정의 훅 내에서 Vue의 라이프사이클 훅을 사용할 수 있습니다. 예를 들어, 컴포넌트가 마운트될 때 API를 호출하거나, <a href='https://sangseek.com/sangseeks/언마운트/ko'>언마운트</a>될 때 이벤트 리스너를 정리하는 등의 작업을 수행할 수 있습니다. ```javascript import { ref, onMounted, onUnmounted } from 'vue'; export function useEventListener(eventName, handler) { const addEventListener = () => { window.addEventListener(eventName, handler); }; const removeEventListener = () => { window.removeEventListener(eventName, handler); }; onMounted(addEventListener); onUnmounted(removeEventListener); } ``` 5. 사용자 정의 훅의 <a href='https://sangseek.com/sangseeks/재사용성/ko'>재사용성</a> 사용자 정의 훅은 여러 컴포넌트에서 재사용할 수 있습니다. 이를 통해 코드 중복을 줄이고, 유지보수를 쉽게 할 수 있습니다. 예를 들어, 여러 컴포넌트에서 동일한 API 호출 로직을 사용할 수 있습니다. 6. 사용자 정의 훅의 테스트 사용자 정의 훅은 독립적인 함수이므로, 단위 테스트를 작성하기에 용이합니다. Jest와 같은 테스트 프레임워크를 사용하여 훅의 동작을 검증할 수 있습니다. ```javascript import { useCustomHook } from './useCustomHook'; import { mount } from '@vue/<a href='https://sangseek.com/sangseeks/test/ko'>test</a>-utils'; test('fetches data on mount', async () => { const wrapper = mount({ setup() { const { data } = useCustomHook(); return { data }; }, template: '<div>이중 중괄호 열기 data 이중 중괄호 닫기</div>', }); await wrapper.vm.$nextTick(); // 데이터가 로드될 때까지 기다림 expect(wrapper.text()).toContain('Expected Data'); }); ``` 결론 Vue.js에서 사용자 정의 훅을 만드는 것은 코드의 재사용성을 높이고, 컴포넌트의 로직을 깔끔하게 유지하는 데 매우 유용합니다. Composition API를 활용하여 상태 관리, API 호출, 이벤트 리스너 설정 등을 쉽게 처리할 수 있으며, 이를 통해 더 나은 개발 경험을 제공할 수 있습니다.
