Render Props (Toggle with children-as-function)

#40StructuralMedium

Render Props (Toggle with children-as-function)

Render Props

Toggle 컴포넌트를 children-as-a-function 형태로 구현하세요. 자식은 함수이며 { on, toggle } API를 인자로 받습니다.

API

type ToggleApi = {
  on: boolean;
  toggle: () => void;
};

type ToggleProps = {
  initial?: boolean;
  children: (api: ToggleApi) => ReactNode;
};

export function Toggle(props: ToggleProps): JSX.Element;

사용 예시

<Toggle initial={false}>
  {({ on, toggle }) => (
    <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>
  )}
</Toggle>

학습 포인트

호출 측이 렌더 결정권을 가짐 (HOC와의 결정적 차이)
같은 Toggle 로직을 완전히 다른 UI에 재사용 가능
데이터/콜백을 prop이 아닌 함수 인자로 전달하는 패턴

import { useState, ReactNode } from 'react';

export type ToggleApi = {
  on: boolean;
  toggle: () => void;
};

export type ToggleProps = {
  initial?: boolean;
  children: (api: ToggleApi) => ReactNode;
};

export function Toggle({ initial = false, children }: ToggleProps) {
  // TODO: useState로 on 상태를 관리하세요
  // TODO: toggle 함수를 만드세요 (on -> !on)
  // TODO: children을 함수로 호출하고 { on, toggle }을 인자로 전달하세요
  return <>{/* TODO */}</>;
}

Open Sandbox

Sandpack 로드 중…

import { useState, ReactNode } from 'react';

export type ToggleApi = {
  on: boolean;
  toggle: () => void;
};

export type ToggleProps = {
  initial?: boolean;
  children: (api: ToggleApi) => ReactNode;
};

export function Toggle({ initial = false, children }: ToggleProps) {
  // TODO: useState로 on 상태를 관리하세요
  // TODO: toggle 함수를 만드세요 (on -> !on)
  // TODO: children을 함수로 호출하고 { on, toggle }을 인자로 전달하세요
  return <>{/* TODO */}</>;
}

Open Sandbox