Render Props 패턴

Render Props 패턴

• ui는 외부에서 받으므로 계속 달라질 수 있음.
• 로직은 내부로직을 callback으로 반환해서 ui는 다르나 같은 로직을 쓰고 있음.
• 재사용성을 높이기 위한 패턴임.

import React, { useState } from 'react';

// 로직만 포함하는 Counter 컴포넌트
function Counter({ children }) {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return children(count, increment);  // 상태와 로직만 전달
}

// 재사용할 로직을 사용하는 App 컴포넌트
function App() {
  return (
    <div>
      <Counter>
        {(count, increment) => (
          <div>
            <p>Count A: {count}</p>
            <button onClick={increment}>Increment A</button>
          </div>
        )}
      </Counter>

      <Counter>
        {(count, increment) => (
          <div>
            <p>Count B: {count}</p>
            <button onClick={increment}>Increment B</button>
          </div>
        )}
      </Counter>
    </div>
  );
}

export default App;

 

 

합성 상태에서 합성해줄 부모 컴포넌트가 상태까지 포함하면 이런 패턴이 되는게 아닐까? 하는 생각이 들었다. 

이렇게 만들면 해당 컴포넌트는 인스턴스식으로 상태를 가질 수 있어서 보다 강한 재활용이 강할 것 같다.