React.Children.map() 함수

React.Children.map() 함수는 React에서 제공하는 유틸리티 함수 중 하나입니다. 이 함수를 사용하면 React 컴포넌트의 자식 요소(children)를 매핑하고 수정할 수 있습니다.

React.Children.map(children, function(child, index) { ... })

1. 첫 번째 인자로 자식 요소(children)를 전달
2. 두 번째 인자로는 콜백 함수를 전달합니다
   1. 첫 번째 인자로는 현재 자식 요소가 전달
   2. 두 번째 인자로는 현재 자식 요소의 인덱스가 전달됩니다

예시

import React from 'react';

const Parent = ({ children }) => {
  const modifiedChildren = React.Children.map(children, (child, index) => {
    // 자식 요소를 수정하여 반환하는 예시
    return React.cloneElement(child, {
      className: `modified-child-${index}`,
    });
  });

  return <div>{modifiedChildren}</div>;
};

const Child = ({ className }) => {
  return <div className={className}>Child Component</div>;
};

const App = () => {
  return (
    <Parent>
      <Child />
      <Child />
      <Child />
    </Parent>
  );
};

export default App;