Frontend Academy · 강의

Context를 사용한 복합 컴포넌트

Context를 사용해 부모 컴포넌트와 지정된 자식 컴포넌트 사이에서 암시적 상태를 공유하고, 및 과 같은 API를 모델링합니다.

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

복합 컴포넌트란 무엇입니까?

복합 컴포넌트는 하나의 단위처럼 함께 작동하도록 설계된 관련 컴포넌트의 집합입니다. HTML의 <select>와 <option>이 그 예입니다. 부모는 특정 자식과 암묵적인 상태를 공유합니다.

목표: 더 깔끔한 API

<Select options={[...]} value={x} onChange={...} /> 대신 <Select><Option value="a">Apple</Option></Select>처럼 작성합니다. 구조가 선언적이며 JSX 방식에 자연스럽게 맞습니다.

단순한 접근 방식의 문제

프롭을 통해 상태를 전달하면 사용하는 쪽에서 모든 연결을 직접 구성해야 합니다. 자식은 부모의 상태를 자동으로 알 수 없습니다.

// Without compound pattern — verbose:
<Tabs activeIndex={0} onChange={setIndex}>
  <TabList>
    <Tab index={0}>Home</Tab>
    <Tab index={1}>Profile</Tab>
  </TabList>
</Tabs>

연결자 역할을 하는 Context

부모가 공유 상태로 Context를 만들고 이를 제공합니다. 자식은 Context를 사용하므로 프롭을 명시적으로 연결할 필요가 없습니다.

import { createContext, useContext, useState } from 'react';

const TabsContext = createContext(null);

export function Tabs({ children, defaultIndex = 0 }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

자식 컴포넌트의 Context 사용

각 자식은 Context에서 값을 읽으므로 트리를 따라 프롭을 전달할 필요가 없습니다.

export function Tab({ index, children }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  const isActive = activeIndex === index;
  return (
    <button
      className={isActive ? 'active' : ''}
      onClick={() => setActiveIndex(index)}
    >
      {children}
    </button>
  );
}

export function Panel({ index, children }) {
  const { activeIndex } = useContext(TabsContext);
  if (activeIndex !== index) return null;
  return <div className="panel">{children}</div>;
}

검색하기 쉬운 정적 속성

사용자가 자동 완성을 통해 찾을 수 있도록 하위 컴포넌트를 부모에 연결합니다.

Tabs.Tab = Tab;
Tabs.Panel = Panel;

// Usage:
<Tabs>
  <Tabs.Tab index={0}>Home</Tabs.Tab>
  <Tabs.Tab index={1}>Profile</Tabs.Tab>
  <Tabs.Panel index={0}>Home content</Tabs.Panel>
  <Tabs.Panel index={1}>Profile content</Tabs.Panel>
</Tabs>

실제 예시: Disclosure

Disclosure 위젯에는 Context를 통해 열림 또는 닫힘 상태를 공유하는 Trigger와 Panel 자식이 있습니다.

function Disclosure({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <DisclosureContext.Provider value={{ isOpen, setIsOpen }}>
      <div>{children}</div>
    </DisclosureContext.Provider>
  );
}

function Trigger({ children }) {
  const { isOpen, setIsOpen } = useContext(DisclosureContext);
  return <button onClick={() => setIsOpen(o => !o)}>{children}</button>;
}

function Panel({ children }) {
  const { isOpen } = useContext(DisclosureContext);
  return isOpen ? <div>{children}</div> : null;
}

공개 API로서의 훅

사용자가 여러분의 컴포넌트를 기반으로 자신만의 컴포넌트를 만들 수 있도록 사용자 지정 훅을 내보냅니다.

export function useTabs() {
  const ctx = useContext(TabsContext);
  if (!ctx) throw new Error('useTabs must be used inside <Tabs>');
  return ctx;
}

다형적 복합 컴포넌트

부모가 as 프롭이나 asChild 패턴(Radix UI의 방식)을 통해 어떤 요소든 렌더링할 수 있게 합니다. 이를 통해 복합 컴포넌트를 임의의 JSX와 조합할 수 있습니다.

헤드리스 복합 패턴

헤드리스 라이브러리(Radix, Headless UI)는 스타일이 없는 복합 컴포넌트를 제공합니다. 접근성 로직이 내장되어 있으므로 필요한 방식으로 스타일을 지정하면 됩니다.

주의점: 자식 검사

이전에는 React.Children을 사용해 자식을 검사하는 패턴이 있었습니다. 이 방식은 취약하고 불안정합니다. 상태 공유에는 항상 Context를 우선 사용하십시오.

빠른 확인

복합 컴포넌트 패턴에서 자식 컴포넌트는 부모와 어떻게 통신합니까?

복습: 복합 컴포넌트

복합 컴포넌트를 사용하면 관련된 부분이 하나의 선언적 단위로 작동합니다. 상태 공유에는 Context를 사용하고, 부모에는 Provider를, 자식에는 useContext를 둡니다. 검색하기 쉽도록 하위 컴포넌트를 정적 속성으로 연결합니다. 사용자 지정 훅을 공개 API로 내보냅니다. Radix와 Headless UI를 훌륭한 참고 자료로 활용할 수 있습니다. Children 검사보다 Context를 우선하십시오.

자주 묻는 질문

“Context를 사용한 복합 컴포넌트” 강의는 무료인가요?

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

“Context를 사용한 복합 컴포넌트”에서 뭘 배우나요?

Context를 사용해 부모 컴포넌트와 지정된 자식 컴포넌트 사이에서 암시적 상태를 공유하고, 및 과 같은 API를 모델링합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“Context를 사용한 복합 컴포넌트” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기