React에서 children을 가지는 재사용가능 컴포넌트 만들기

PropsWithChildren 타입을 이용하여 Props에 children 속성을 패스할수 있게 지정해준다.

이 코드에서 핵심 포인트는 두가지라고 생각했다.

• React.isValidElement()
• React.cloneElement()

import React, { PropsWithChildren, ReactNode } from "react";

type Props<T> = {
  list: T;
};
const ReusableList = <T extends any[]>({
  list,
  children,
}: PropsWithChildren<Props<T>>) => {
  return (
    <div>
      {list.map((item) => (
        <>
          {React.Children.map<ReactNode, ReactNode>(children, (child) => {
            if (React.isValidElement(child)) {
              return (
                <>
                  {React.cloneElement(child as JSX.Element, {
                    name: item.name,
                  })}
                </>
              );
            }
          })}
        </>
      ))}
    </div>
  );
};

배열에 들어있는 각 아이템들을 렌더링해줄 아이템 전용 컴포넌트를 생성한다.
ChildComponent는 props가 any 타입이므로 프랍스를 받든 안받든 상관없게 되었다.
이렇게 해줘야만 children이 될 컴포넌트를 부모 컴포넌트에 집어넣을때 props를 따로 지정해주지 않아도 오류가 나지 않는다고 생각했다.

const ChildComponent: React.FC<any> = (props) => {
  return <div>{props.name}</div>;
};

최종적으로 App 컴포넌트에서 ResusableList 컴포넌트를 집어넣어준다.

function App() {
 	return (
    	<ResuableList list={dummy}>
      		<ChildComponent />  
      	</ResuableList>
    )
}