Files

T

koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)

이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-08 12:24:15 +09:00

6.3 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

Render Props

매 한 줄

"매 component 가 prop 으로 받은 function 을 호출해 무엇을 render 할지 결정". Michael Jackson 이 popularize 한 React 합성 패턴 (2017). 2018 Hooks 등장 후 매 logic-sharing 용도는 대부분 custom hook 으로 대체되었지만, 매 render-time data injection (animation, virtualization, headless UI) 에서는 매 2026 까지도 first-class 도구.

매 핵심

매 정의

매 component 가 호출자에게 어떻게 render 할지 의 control 을 위임.
Function-typed prop (children 또는 render) 이 state/computation 을 인자로 받아 ReactNode 반환.
매 inversion of control — provider 는 logic, consumer 는 view.

매 Hooks 와 의 관계

매 logic reuse 의 90%: custom hook 이 우월 (no nesting, easier types).
매 render-time slot 패턴: render props 가 여전히 적합 — Framer Motion, react-virtual, Radix UI 등.
매 headless UI (Headless UI, Radix, Ariakit) 는 render props + compound component 혼합.

매 응용

Animation: Framer Motion <AnimatePresence> children function.
Virtualization: TanStack Virtual <Virtualizer> row renderer.
Form: react-hook-form <Controller render={...}>.
Headless: Headless UI <Menu.Item>{({active}) => ...}</Menu.Item>.

💻 패턴

Basic render prop

type MouseTrackerProps = {
  render: (state: { x: number; y: number }) => React.ReactNode;
};

function MouseTracker({ render }: MouseTrackerProps) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}

// usage
<MouseTracker render={({ x, y }) => <p>{x}, {y}</p>} />

Children as function (FaCC)

type Props = { children: (state: { x: number; y: number }) => React.ReactNode };

function MouseTracker({ children }: Props) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>{children(pos)}</div>;
}

<MouseTracker>{({ x, y }) => <p>{x}, {y}</p>}</MouseTracker>

TanStack Virtual (real-world 2026)

import { useVirtualizer } from '@tanstack/react-virtual';

function List({ items }: { items: string[] }) {
  const ref = useRef<HTMLDivElement>(null);
  const v = useVirtualizer({
    count: items.length,
    getScrollElement: () => ref.current,
    estimateSize: () => 32,
  });
  return (
    <div ref={ref} style={{ height: 400, overflow: 'auto' }}>
      <div style={{ height: v.getTotalSize() }}>
        {v.getVirtualItems().map((vi) => (
          <div key={vi.key} style={{ transform: `translateY(${vi.start}px)` }}>
            {items[vi.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

react-hook-form Controller

import { Controller, useForm } from 'react-hook-form';

function Form() {
  const { control } = useForm<{ name: string }>();
  return (
    <Controller
      control={control}
      name="name"
      render={({ field, fieldState }) => (
        <input {...field} aria-invalid={!!fieldState.error} />
      )}
    />
  );
}

import { Menu } from '@headlessui/react';

<Menu>
  <Menu.Button>Options</Menu.Button>
  <Menu.Items>
    <Menu.Item>
      {({ active }) => (
        <a className={active ? 'bg-blue-500' : ''} href="/edit">Edit</a>
      )}
    </Menu.Item>
  </Menu.Items>
</Menu>

Generic render prop with typed slot

function DataLoader<T>({
  url,
  children,
}: {
  url: string;
  children: (s: { data: T | null; loading: boolean; error: Error | null }) => React.ReactNode;
}) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData).catch(setError).finally(() => setLoading(false));
  }, [url]);
  return <>{children({ data, loading, error })}</>;
}

Hook equivalent (when to prefer)

function useMouse() {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const onMouseMove = (e: React.MouseEvent) => setPos({ x: e.clientX, y: e.clientY });
  return { pos, onMouseMove };
}

function MyView() {
  const { pos, onMouseMove } = useMouse();
  return <div onMouseMove={onMouseMove}>{pos.x},{pos.y}</div>;
}

매 결정 기준

상황	Approach
Logic 만 공유	Custom hook (default since 2019)
DOM/JSX slot 주입 필요	Render props
Generic library (virtualizer, animator)	Render props
Headless UI primitive	Render props + compound
Class component legacy	Render props (hook 불가)

기본값: 매 hook 우선, 매 render slot 이 진짜 필요할 때만 render props.

🔗 Graph

부모: React Patterns · Component Composition (React)
변형: Custom Hooks · Component-Composition
응용: Headless UI · react-hook-form
Adjacent: Inversion of Control · Slot Pattern

🤖 LLM 활용

언제: 매 library API 설계, 매 generic data-injection slot, 매 animation choreography. 언제 X: 매 단순 logic share — hook 으로 충분. 매 callback hell 위험.

❌ 안티패턴

Render prop hell: 매 nesting 5단계 — flatten 또는 hook.
Inline function in render: 매 매 render 마다 새 function — child memoization 깨짐, useCallback 또는 module-scope.
Both children and render: 매 ambiguous API — 하나만.
Hook 으로 충분한데 render prop: 매 over-engineering.
Type any: 매 generic slot 의 type erasure — <T,> generic 사용.

🧪 검증 / 중복

Verified: React docs (legacy section), TanStack Virtual, react-hook-form, Headless UI 공식 docs (2026).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — render props vs hooks, real-world 2026 examples

6.3 KiB Raw Blame History