Context로 퀴즈 컴포넌트를 만들다 막혀서 React.Children을 공부하게 된 이야기

const QuizContext = React.createContext<{
  currentStep: number;
  score: number;
  onResult: (isCorrect: boolean) => void;
  onNext: () => void;
} | null>(null);

function ArticleQuiz({ children }: { children: React.ReactNode }) {
  const [currentStep, setCurrentStep] = useState

function ArticleQuizItem({ question, answer, ...props }: QuizItemProps) {
  const ctx = React.useContext(QuizContext);
  if (!ctx) throw new Error("ArticleQuizItem must be inside ArticleQuiz");

  const { currentStep, onResult, onNext } = ctx;
  // ... 문제 UI 렌더링
}

function ArticleQuizItem({ question, answer }: QuizItemProps) {
  const { currentStep } = React.useContext(QuizContext)!;

  // 문제: 내 index를 어떻게 알지?
  const myIndex = ???;

  if (myIndex !== currentStep) return null;
  // ...
}

<ArticleQuiz>
  <ArticleQuizItem index={0} question="..." />
  <ArticleQuizItem index={1} question="..." />
  <ArticleQuizItem index={2} question="..." />
</ArticleQuiz>

function ArticleQuiz({ children }) {
  const registry = useRef<string[]>([]);

  const register = (id: string) => {
    if (!registry.current.includes(id)) registry.current.push(id);
    return registry.current.indexOf(id);
  };

  return 

function ArticleQuiz({ children }: ArticleQuizProps) {
  const [currentStep, setCurrentStep] = useState(0);

  const items = React.Children.toArray(children).filter(React.isValidElement);
  const totalSteps = items.length;

  return (
    <div>
      {React.cloneElement(items[currentStep] as  

// children이 하나일 때
<Quiz><Item /></Quiz>          // children = ReactElement (배열 아님!)

// children이 여러 개일 때
<Quiz><Item /><Item /></Quiz>  // children = ReactElement[]

// toArray를 쓰면 항상 배열
const items = React.Children.toArray(children);
// 단일 원소 → [element], 배열 → 그대로, null → []

function Tabs({ children }: { children: React.ReactNode }) {
  return (
    <div>
      {React.Children.map(children, (child, index) => {
        if (!React.isValidElement(child)) return null; // 자동 제거
        return React.cloneElement(child, { index });
      

function Tooltip({
  children,
  text,
}: {
  children: React.ReactNode;
  text: string;
}) {
  const child = React.Children.only(children);
  return React.cloneElement(child as React.ReactElement, {
    onMouseEnter: showTooltip,
  });
}

// 이렇게 감싸면 ArticleQuiz가 QuizItem을 인식 못함
<ArticleQuiz>
  <div>
    <ArticleQuizItem ... />  {/* toArray로 접근 불가 */}
  </div>
</ArticleQuiz>

{/* 데이터 배열 방식 — MDX에서 쓰면 이렇게 된다 */}

<ArticleQuiz
  items={[
    {
      mode: "multiple",
      question: "질문1",
      choices: ["A", "B", "C"],
      answer: 1,
      explanation: "해설",
    },
    {
      mode: "multiple",
      question: "질문2",
      choices: ["X", "Y", "Z"],
      answer: 0,
      explanation: "해설",
    },
  ]}
/>

React does not recognize the `stepIndex` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom attribute,
spell it as lowercase `stepindex` instead.

// ArticleQuiz — cloneElement로 내부 prop 주입
React.cloneElement(items[currentStep] as React.ReactElement, {
  stepIndex: currentStep, // ← 이 prop이 문제
  currentStep,
  onResult: handleResult,
  onNext: handleNext,
});

// ArticleQuizItem — ...props가 DOM div에 그대로 전달됨
function ArticleQuizItem({ mode, question, onResult, onNext, ...props }) {
  return <div {...props}>...</div>;
  //          ^^^^^^^^ stepIndex, currentStep이 DOM attribute로 들어감

function ArticleQuizItem({
  mode,
  question,
  choices,
  answer,
  explanation,
  onResult,
  onNext,
  className,
  stepIndex: _stepIndex, // destructure만 하고 사용하지 않음
  currentStep: _currentStep, // DOM으로 전달되는 것을 방지
  ...props
}: ArticleQuizItemProps) {
  return (
    <div className={cn("flex flex-col gap-4", className)} {...props}>
      ...
    </div>