React 패턴 - Render Props!

Render Props 패턴은 가장 잘 알려진 React 컴포넌트 패턴 중 하나입니다. 구성 요소에 종속성(소품)을 주입해야 하는 시나리오에서 유용합니다.

무엇을 해결합니까?

프레젠테이션 구성 요소에서 공급자/논리 구성 요소를 분리할 수 있습니다.
Layout 또는 HomePage 구성 요소를 렌더링하는 ProfilePage 구성 요소가 있는 경우 Page 구성 요소에 종속되고 싶지 않습니다. 따라서 Layout 구성 요소는 HomePage 또는 ProfilePage 를 가져오지 않지만 Layout 구성 요소는 여전히 소품을 전달할 수 있습니다.

실제 렌더링 소품

따라서 원하는 다른 구성 요소를 렌더링할 수 있는 Layout 구성 요소를 가질 수 있습니다. 다음과 같은 것:

<Layout>
  <HomePage/>
</Layout>
// or 
<Layout>
  <ProfilePage/>
</Layout>
// etc

따라서 이 경우 Layout은 렌더링children하도록 구현됩니다. 이러한 방식으로 내부의 다른 구성 요소를 렌더링할 수 있습니다.

function Layout({ children }) {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <div className="layout">
      <button onClick={() => setIsOpen(!isOpen)}> Menu </button>
      {isOpen && <Menu />}
      {children}
    </div>
  );
}

좋습니다. 하지만 문제가 있습니다. HomePage 및 ProfilePage 구성 요소도 어떤 이유로 메뉴가 열려 있는지 알아야 합니다. 어떻게 합니까?

function Home({ isOpen }) {
  return (
    <div className="home">
      <h1> Home</h1>
      {!isOpen && <button> Contact! </button>}
    </div>
  );
}

At this point, you are encouraged to spend a few minutes and think about a solution before you scroll down.

그다지 좋지 않은 접근 방식:
❌ isOpen을 Redux에 넣습니다(실제로 전역 상태가 아님).
❌ 컨텍스트 제공자 사용
❌ 조건부 렌더링을 사용하여 Page에서 Layout 구성 요소를 직접 렌더링

✅ 솔루션

분명히 Render Props 패턴을 사용하도록 코드를 리팩토링하십시오.

function Layout({ children }) {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <div className="layout">
      <button onClick={() => setIsOpen(!isOpen)}> Menu </button>
      {isOpen && <Menu />}
      {children(isOpen)}
    </div>
  );
}

이제 Layout에서 구성 요소를 래핑하면 다음과 같이 보입니다.

<Layout>
  {(isOpen) => <Home isOpen={isOpen} />}
</Layout>
// or 
<Layout>
  {(isOpen) => <ProfilePage isOpen={isOpen} />}
</Layout>

두 가지를 변경했습니다.
1) children에서 렌더링할 때 Layout를 함수로 호출하고 원하는 props를 전달합니다.
2) 레이아웃 구성 요소에 래핑된 것을 렌더링할 때 - 함수 구문을 사용하여 하위 구성 요소를 렌더링합니다.

A render prop is a function prop that a component uses to know what to render (React docs).

Render Prop의 단점

이제 디자인 패턴을 사용하는 것이 멋지지만 명심해야 합니다. 모든 디자인 패턴에는 단점도 있습니다.

Render 소품의 단점은 중첩입니다. 예를 들어 다음과 같이 과도하게 사용하는 경우입니다.

<Layout>
  {(isOpen) => 
    <Home isOpen={isOpen} > 
      {(handleSubmit) => <ContactForm submit={handleSubmit}/>} 
    </Home>}
</Layout>

따라서 실제로 필요할 때만 한 레이어에만 두는 것이 좋습니다.

결론

Render props는 흥미로운 패턴입니다. 왜냐하면 우리는 props를 컴포넌트에 주입할 수 있는 반면에 우리의 provider 컴포넌트는 일반적으로 자식만 렌더링하도록 할 수 있기 때문입니다.

위에서 설명한 것과 같이 렌더링 소품을 사용하는 데 현재 제한된 시나리오가 있음을 아는 것이 중요합니다. render props의 일부 사용 사례는 React hooks로 리팩토링될 수 있습니다. 따라서 RP를 시도하기 전에 후크를 고려하십시오.

👇 아래 댓글 👇
render props 패턴이나 다른 React 패턴에 대해 어떻게 생각하십니까? 아직도 Render props나 다른 오래된 React 패턴을 사용하시나요? 아니면 React Hooks만 사용하고 있습니까?

🧡 & 🦄을 남겨주세요. 더 흥미로운 내용을 보려면 내 .