Vue Academy · 강의

고차 컴포넌트(HOC) 패턴

HOC로 컴포넌트를 감싸고 Props와 슬롯을 전달하며, HOC와 컴포저블 중 무엇을 사용할지 알아봅니다.

고차 컴포넌트(HOC) 패턴은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

고차 컴포넌트란 무엇인가요

고차 컴포넌트(HOC)는 컴포넌트를 받아 그 컴포넌트를 감싼 새 컴포넌트를 반환하는 함수입니다. 원본을 수정하지 않고 로그 기록, 인증 확인 또는 데이터 불러오기 같은 공통 기능을 추가합니다.

함수 시그니처

관례상 HOC의 이름에는 with 접두사를 붙입니다. 감쌀 컴포넌트를 받아 기능이 추가된 컴포넌트를 반환합니다.

function withLogging(Wrapped) {
  // return a new component
}

defineComponent 반환하기

새 컴포넌트는 defineComponent으로 만듭니다. 해당 컴포넌트의 setup 함수는 h를 통해 감싼 컴포넌트를 렌더링합니다.

import { defineComponent, h } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, ctx) {
      return () => h(Wrapped, props, ctx.slots);
    }
  });
}

속성 전달하기

래퍼가 투명하게 동작하도록 ctx.attrs를 감싼 컴포넌트에 펼쳐 전달합니다. 이렇게 하면 class, style 및 인식되지 않은 모든 속성이 전달됩니다.

setup(props, { attrs, slots }) {
  return () => h(Wrapped, { ...attrs }, slots);
}

슬롯 전달하기

래퍼의 slots 객체를 children 인수로 전달하면 감싼 컴포넌트가 사용하는 쪽에서 전달한 모든 슬롯 콘텐츠를 계속 받을 수 있습니다.

return () => h(Wrapped, attrs, slots);

공통 기능 추가하기

핵심은 동작을 주입하는 것입니다. 여기서는 감싼 컴포넌트의 마운트와 언마운트 전후에 로그를 기록합니다.

import { onMounted, onUnmounted } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      onMounted(() => console.log("mounted"));
      onUnmounted(() => console.log("unmounted"));
      return () => h(Wrapped, attrs, slots);
    }
  });
}

HOC 사용하기

어떤 컴포넌트든 감싼 다음 템플릿이나 다른 렌더 함수에서 일반 컴포넌트처럼 결과를 사용할 수 있습니다.

import BaseTable from "./BaseTable.vue";

const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any component

래퍼 이름 지정하기

name을 설정하면 Vue DevTools에서 래퍼를 식별할 수 있습니다. 감싼 컴포넌트의 이름을 조합하면 트리를 읽기 쉽게 유지할 수 있습니다.

return defineComponent({
  name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
  setup(props, ctx) { /* ... */ }
});

추가 속성 주입하기

HOC는 데이터를 가져온 결과나 기능 플래그처럼 감싼 컴포넌트에 추가 속성을 제공할 수 있습니다.

function withUser(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      const user = inject("currentUser");
      return () => h(Wrapped, { ...attrs, user }, slots);
    }
  });
}

HOC와 컴포저블 비교

컴포저블은 로직을 공유하며 Vue 3에서는 이를 더 선호하는 경우가 많습니다. 수정할 수 없는 기존 컴포넌트의 렌더링을 감싸야 하거나 오류 처리 같은 경계를 표준화해야 할 때는 HOC가 적합합니다.

여러 HOC 조합하기

각 HOC가 컴포넌트를 반환하므로 중첩하여 조합할 수 있습니다. 가장 바깥쪽에 적용할 HOC를 마지막에 적용합니다.

const Enhanced = withLogging(withUser(BaseTable));

빠른 확인

HOC 래퍼가 투명하게 동작하려면 감싼 컴포넌트에 무엇을 전달해야 하나요?

복습

withLogging(Wrapped)과 같은 HOC는 h(Wrapped, attrs, slots)로 감싼 컴포넌트를 렌더링하는 새로운 defineComponent을 반환하며, 로그 기록이나 주입된 속성과 같은 공통 기능을 추가합니다. 투명하게 동작하려면 attrs와 슬롯을 전달하고, 로직만 공유하면 될 때는 컴포저블을 우선 사용합니다.

자주 묻는 질문

“고차 컴포넌트(HOC) 패턴” 강의는 무료인가요?

네 — “고차 컴포넌트(HOC) 패턴” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“고차 컴포넌트(HOC) 패턴”에서 뭘 배우나요?

HOC로 컴포넌트를 감싸고 Props와 슬롯을 전달하며, HOC와 컴포저블 중 무엇을 사용할지 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“고차 컴포넌트(HOC) 패턴” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기