Render Props Pattern는 React에서 컴포넌트 간에 동작이나 UI를 공유할 수 있는 패턴 중 하나.
컴포넌트의props로 함수를 전달하고, 그 함수를 통해 UI를 동적으로 렌더링하는 방식.

→ 이 패턴은 컴포넌트의 재사용성을 높이는데 유용.

Ex)

// Input.jsx 
const Input = ({icon:Icon, ...props}) => { 
  return (
    <div className="tailwind style">
      <div className="tailwind style">
        <Icon className='tailwind style' />
      </div>
      <input 
        {...props}
        className="tailwind style"
      />
    </div>
  );
};

export default Input;

Input.jsx의 icon:Icon처럼 props로 받은 값을 컴포넌트로 사용하는 패턴을 Render Props pattern이라고 한다.
여기서 Icon은 단순한 데이터가 아니라, React 컴포넌트 자체를 props로 전달 받고 있다.
이를 통해 부모 컴포넌트가 자식 컴포넌트에 특정 컴포넌트를 동적으로 전달할 수 있게 된다.