React에서 Render Props는 function prop을 사용하여 컴포넌트 간 로직을 공유하는 데 사용되는 기술입니다. 하위 항목이나 컴포지션을 사용하는 대신 콘텐츠를 동적으로 렌더링하기 위해 함수가 소품으로 전달됩니다. 이 접근 방식은 기능적 구성 요소 및 후크와 잘 작동합니다.

다음은 기능적 구성 요소를 사용하여 Render Props를 구현하는 방법에 대한 예입니다.

예

import React, { useState } from 'react';

// The component using render props
const MouseTracker = ({ render }) => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  };

  return (
    

      {render(mousePosition)}
    
  );
};

// Component that consumes the render props
const App = () => {
  return (
    

      
Mouse Tracker
       (
        
Mouse Position: {x}, {y}
      )}/>
    
  );
};

export default App;

설명:

• MouseTracker는 렌더링 소품을 사용하는 기능적 구성 요소입니다.
• render prop은 마우스 위치를 받아 JSX를 반환하는 함수입니다.
• 앱 구성요소는 마우스의 x 및 y 좌표를 표시하는 함수를 렌더링 소품으로 전달합니다.

이 패턴을 사용하면 MouseTracker 구성 요소 내부 논리를 기반으로 콘텐츠를 렌더링하는 방법을 더 유연하게 결정할 수 있습니다.