Render Props (Toggle)

#6StructuralMedium

Render Props

Toggle 컴포넌트를 render-props 형태로 구현하세요. 자식이 함수를 받고, 그 함수에 토글 상태와 핸들러를 인자로 넘깁니다.

API

type ToggleProps = {
  initialOn?: boolean;
  children: (api: { on: boolean; toggle: () => void }) => ReactNode;
};

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

사용 예시

<Toggle>
  {({ on, toggle }) => (
    <button onClick={toggle}>{on ? 'on' : 'off'}</button>
  )}
</Toggle>

학습 포인트

데이터를 prop이 아닌 함수의 인자로 자식에게 전달
호출 측이 렌더 결정권을 갖는다 (HOC와의 차이)
같은 Toggle을 다른 UI로 여러 번 재사용 가능

import { useState, ReactNode } from 'react';

type ToggleProps = {
  initialOn?: boolean;
  children: (api: { on: boolean; toggle: () => void }) => ReactNode;
};

export function Toggle({ initialOn = false, children }: ToggleProps) {
  // TODO: useState로 on 관리
  // TODO: children을 함수로 호출해서 { on, toggle }을 인자로 넘기세요
  return <>{/* TODO */}</>;
}

Sandpack 로드 중…

import { useState, ReactNode } from 'react';

type ToggleProps = {
  initialOn?: boolean;
  children: (api: { on: boolean; toggle: () => void }) => ReactNode;
};

export function Toggle({ initialOn = false, children }: ToggleProps) {
  // TODO: useState로 on 관리
  // TODO: children을 함수로 호출해서 { on, toggle }을 인자로 넘기세요
  return <>{/* TODO */}</>;
}