좋은 컴포저블의 조건
이름 지정 규칙(useName), 반응형 상태 캡슐화, 원시 값이 아닌 ref 반환 방법을 다룹니다.
좋은 컴포저블의 조건은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
컴포저블이란 무엇인가
컴포저블은 Vue 컴포지션 API를 사용하여 상태를 가지는 로직을 캡슐화하고 재사용하는 함수입니다. Vue 3에서 믹스인을 대체하는 방식으로, 더 깔끔하고 명시적이며 타입 친화적입니다.
use 접두사 관례
관례에 따라 컴포저블은 use 접두사를 붙여 이름을 짓습니다. 예를 들면 useCounter, useFetch, useMouse가 있습니다. 이렇게 하면 해당 함수가 반응형 로직을 포함한다는 사실을 즉시 알 수 있습니다.
function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }원시 값이 아닌 반응형 참조 반환
소비자가 구조 분해 할당을 하더라도 반응성을 유지할 수 있도록 반응형 참조(또는 반응형 상태)를 반환해야 합니다. count.value를 반환하면 이후에 업데이트되지 않는 스냅샷이 전달됩니다.
function useCounter() {
const count = ref(0);
return { count }; // return the ref itself
}안전한 구조 분해 할당
반응형 참조를 반환하므로 소비자는 반응성을 잃지 않고 자유롭게 구조 분해 할당을 할 수 있습니다. 각 반응형 참조는 고유한 반응형 연결을 유지합니다.
const { count } = useCounter();
// count stays reactive after destructuring단일 책임
좋은 컴포저블은 한 가지 일만 합니다. useFetch는 데이터를 가져오고, useLocalStorage는 데이터를 저장합니다. 작고 집중된 컴포저블을 조합하면 더 큰 기능도 깔끔하게 만들 수 있습니다.
컴포저블 조합하기
컴포저블은 다른 컴포저블을 호출하여 계층적인 로직을 구성할 수 있습니다. 예를 들어 useUserProfile이 내부에서 useFetch를 사용할 수 있습니다.
function useUserProfile(id) {
const { data } = useFetch("/users/" + id);
return { user: data };
}부수 효과 정리하기
컴포저블이 이벤트 수신기, 타이머 또는 구독을 추가한다면 메모리 누수를 방지하기 위해 onUnmounted에서 반드시 제거해야 합니다.
import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));반응형 인수 받기
컴포저블은 입력으로 반응형 참조나 getter를 받을 수 있으며, watch 또는 watchEffect로 이를 감시하여 유연하게 동작하도록 만들 수 있습니다.
function useDouble(source) {
return computed(() => unref(source) * 2);
}이름 충돌 피하기
컴포저블이 여러 값을 반환할 때는 의미가 분명한 이름을 노출해야 합니다. 두 컴포저블이 data를 반환한다면 구조 분해 할당 시 이름을 바꾸어 충돌을 피하십시오.
const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");프레임워크 관례에 맞게 작성하기
생명주기 훅이 올바르게 등록되도록 컴포저블은 setup 또는 다른 컴포저블의 최상위에서 동기적으로 호출해야 합니다. 조건문이나 비동기 콜백 내부에서 호출해서는 안 됩니다.
// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after await문서화와 반환 형태
소비자가 무엇을 받는지 알 수 있도록 예측 가능한 객체를 반환해야 합니다. 일관된 형태(상태와 메서드)를 사용하면 컴포저블을 쉽게 배우고 사용할 수 있습니다.
return { count, increment, decrement, reset };빠른 확인
컴포저블은 왜 원시 값 대신 반응형 참조를 반환해야 합니까?
복습
좋은 컴포저블의 특징을 배웠습니다. use 접두사 사용, 안전한 구조 분해 할당을 위한 반응형 참조 반환, 단일 책임, onUnmounted에서의 부수 효과 정리, 그리고 반환 객체에서의 이름 충돌 방지입니다.
자주 묻는 질문
“좋은 컴포저블의 조건” 강의는 무료인가요?
네 — “좋은 컴포저블의 조건” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“좋은 컴포저블의 조건”에서 뭘 배우나요?
이름 지정 규칙(useName), 반응형 상태 캡슐화, 원시 값이 아닌 ref 반환 방법을 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“좋은 컴포저블의 조건” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.