TIL-2024.05.05 - React - 011. Render Props

 

 

 

질문

1. Render Props 에 대해 알려줘 

 

 

Render Props

- React 컴포넌트 간에 코드를 재사용하기 위한 패턴

 

 

기본 예제

import React from 'react';
import './App.css';
import RenderPropsSample from "./components/009-render-props/render-props-sample";
import MouseTracker from "./components/009-render-props/mouse-tracker";

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <RenderPropsSample>
                    {value => value * 2}
                </RenderPropsSample>

                <MouseTracker>
                    {(position) => <p>Mouse position: {position.x}, {position.y}</p>}
                </MouseTracker>
            </div>
        );
    }


};

export default App;

 

 

 

import React from 'react';
import './App.css';
import RenderPropsSample from "./components/009-render-props/render-props-sample";
import MouseTracker from "./components/009-render-props/mouse-tracker";

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <RenderPropsSample>
                    {value => value * 2}
                </RenderPropsSample>

                <MouseTracker>
                    {(position) => <p>Mouse position: {position.x}, {position.y}</p>}
                </MouseTracker>
            </div>
        );
    }


};

export default App;

 

 

 

child-component 에서 {children}

- children은 부모 컴포넌트의 열린 태그와 닫힌 태그 사이의 내용을 나타내는 특별한 prop
- App.jsx 에서 <MouseTracker> 사이의 내용인 (position) => (...) 함수가 MouseTracker 컴포넌트의 children prop 로 전달
- children-component로 전달된 함수를 실행하며 현재 마우스의 위치를 받아오고, 이를 JSX로 렌더링하는 방식으로 구현

 

 

 

다른 예제

 

import React, { useState } from 'react';

// A component that provides data through a render prop
const DataProvider = ({ children }) => {
  // State to hold the data
  const [data, setData] = useState([]);

  // Function to update data
  const updateData = newData => {
    setData(newData);
  };

  // Passes the data and the function to the child component
  return children({ data, updateData });
};

// A component that consumes data using the Render Props pattern
const DataConsumer = ({ render }) => {
  return (
    // Wrapping DataProvider around the content to provide data
    <DataProvider>
      {/* Render prop function receives data and updateData */}
      {({ data, updateData }) => (
        <div>
          <h2>Data List</h2>
          {/* Rendering each item in the data array */}
          <ul>
            {data.map(item => (
              <li key={item.id}>{item.name}</li>
            ))}
          </ul>
          {/* Button to add new item to data */}
          <button onClick={() => updateData([{ id: 1, name: 'New Item' }])}>
            Add Item
          </button>
          {/* Render prop is called with data and updateData function */}
          {render(data, updateData)}
        </div>
      )}
    </DataProvider>
  );
};

// Example usage of DataConsumer
const App = () => {
  return (
    <DataConsumer
      // Render prop function receives data and updateData
      render={(data, updateData) => (
        <div>
          {/* Additional rendering based on data */}
          <h3>Additional Data</h3>
          {/* Rendering data in a JSON format */}
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    />
  );
};

export default App;

 

 

 

 

 

 

답변

 1. Render Props

- 컴포넌트 간에 코드를 재사용하기 위한 패턴으로, child-component 의 props.children 로 전달된 closure 함수를 child-component에서 실행