React.Children 유틸리티

환영합니다

배열 메서드를 직접 사용할 때의 문제

// Unsafe — crashes if children is a single element
children.map(c => ...);

// Safe
React.Children.map(children, c => ...);

React.Children.map

function List({ children }) {
  return (
    <ul>
      {React.Children.map(children, (child, i) => (
        <li key={i}>{child}</li>
      ))}
    </ul>
  );
}

React.Children.count

function RequiresTwo({ children }) {
  if (React.Children.count(children) !== 2) {
    throw new Error('Exactly two children required');
  }
  return <div>{children}</div>;
}

React.Children.toArray

function Reversed({ children }) {
  const arr = React.Children.toArray(children);
  return <>{arr.reverse()}</>;
}

React.Children.forEach

React.Children.forEach(children, child => {
  if (!React.isValidElement(child)) {
    console.warn('Non-element child found');
  }
});

React.Children.only

function SingleChild({ children }) {
  const child = React.Children.only(children);
  return React.cloneElement(child, { 'data-wrapped': true });
}

자식 타입 검증

React.Children.forEach(children, child => {
  if (child.type !== TabPanel) {
    throw new Error('Only TabPanel children allowed');
  }
});

React.Children과 Array.from 비교

현대적인 대안: toArray로 평탄화하기

const items = React.Children.toArray(children);
const first = items[0];
const rest = items.slice(1);

빠른 확인

복습

다음 내용