Render Props

import React from "react";
import Box from "디렉토리어딘가";
 
const MyComponent = () => {
  return (
    <div>
      Hello, World!
      <Box />
    </div>
  );
};
//보통 우리가 자주 접하는 컴포넌트를 함수로 감싼 구조입니다

// ParentComponent.js
import React from "react";
import ChildComponent from "./ChildComponent";
 
const ParentComponent = () => {
  //  renderContent는 Render Prop으로 사용될 함수
  const renderContent = (name) => {
    return <h1>{value}</h1>;
  };
 
  return (
    <div>
      {/* 자식 컴포넌트에게 Render Prop로 함수를 전달 */}
      <ChildComponent render={renderContent} />
    </div>
  );
};
 
export default ParentComponent;

// ChildComponent.js
import React from "react";
 
const ChildComponent = (props) => {
  // Render Prop로 전달된 함수 호출하여 JSX 반환
  return props.render("hello!");
};
 
export default ChildComponent;

import { useState } from "react";
import Fahreheit from "./components/Fahreheit";
import Kelvin from "./components/Kelvin";
 
function Input(props) {
  const [value, setValue] = useState("");
 
  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      {props.render(value)}
    </>
  );
}
//Input 컴포넌트는 JSX 내부 <input> 요소에서 사용자의 입력을 받아들이고 , value 상태를 통해 입력된 값을 표시, onChange 이벤트 핸들러를 통해 입력값이 변경될 때마다 setValue 함수를 호출하여 상태를 업데이트합니다.
//그리고 props.render(value)를 호출하여 render prop으로 전달된 함수를 실행합니다. 이 함수는 Fahreheit와 Kelvin 컴포넌트에 value 값을 전달하고, 해당 컴포넌트들을 렌더링합니다.
 
export default function App() {
  return (
    <div className="App">
      <h1>Temperature Converter</h1>
 
      <Input
        render={(value) => (
          <>
            <Fahreheit value={value} />
            <Kelvin value={value} />
          </>
        )}
      />
    </div>
  );
}
 
//App 컴포넌트는 최상위 컴포넌트로 JSX 내부에는 위에 작성되어있는 Input 컴포넌트가 있습니다. 이 컴포넌트에는 render prop으로 함수가 전달되며, 해당 함수는 Fahreheit와 Kelvin 컴포넌트를 렌더링합니다.
//render prop으로 전달된 함수는 value를 매개변수로 받아 <Fahreheit>와 <Kelvin> 컴포넌트를 렌더링합니다. 이러한 방식으로 Input 컴포넌트와 App 컴포넌트 사이에 데이터를 전달하고 관리할 수 있습니다.

// DynamicList.js
import React from "react";
 
const DynamicList = ({ data, render }) => {
  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{render(item)}</li>
      ))}
    </ul>
  );
};
 
export default DynamicList;

// App.js
import React from "react";
import DynamicList from "./DynamicList";
 
const App = () => {
  const numbers = [1, 2, 3, 4, 5];
  const fruits = ["Apple", "Banana", "Orange", "Grape", "Mango"];
 
  const renderNumberItem = (number) => <span>{number}</span>;
  const renderFruitItem = (fruit) => <span>{fruit}</span>;
 
  return (
    <div>
      <h1>Dynamic List Example</h1>
      <h2>Numbers</h2>
      <DynamicList data={numbers} render={renderNumberItem} />
      <h2>Fruits</h2>
      <DynamicList data={fruits} render={renderFruitItem} />
    </div>
  );
};
 
export default App;