리액트 디자인 패턴 : Container pattern (컨테이너 패턴)

데이터 가져오기, 인증, 레이아웃 제공 등과 같은 커스텀 기능을 재사용하는 선언적 방법을 구현할 수 있습니다.

컨테이너 패턴이란?

커스텀 기능을 제공하고 children prop으로 전달된 React 노드를 렌더링하는 컨테이너 컴포넌트를 사용합니다.

 

패턴의 일부 사용 사례는 다음과 같습니다.

• 로더 - 컨테이너는 특정 조건이 true인 동안 로더를 표시하고, 그렇지 않으면 콘텐츠를 렌더링합니다.
• 인증 게이트 - 사용자가 인증되지 않은 경우 컨테이너는 자식을 렌더링하지 않습니다.
• 레이아웃 및 스타일 제공 (플레이스홀더) - 컨테이너는 일관된 스타일을 제공하는 래퍼 역할을 합니다. 콘텐츠가 다른 여러 대시보드 페이지 컴포넌트가 있고, 각 페이지에 동일한 레이아웃을 제공하고 싶을 때 사용합니다.

컨테이너 패턴 실전에서 사용하기

콘텐츠를 렌더링하기 전에 사용자가 인증되었는지 확인하는 간단한 인증 게이트 컨테이너를 만들어 봅시다.

import React from "react";
import { useGetUserSession } from "./useGetUserSession";

const GateComponent = ({ children }) => {
  const { isAuthenticated } = useGetUserSession();

  if (!isAuthenticated) return null;

  return <>{children}</>;
};

export default GateComponent;

---

보시다시피 매우 간단합니다.

React Hook을 사용하여 앱 상태에서 isAuthenticated 플래그를 가져옵니다.

false면 단순히 null을 반환합니다.

isAuthenticated가 true면 children prop을 렌더링합니다.

이제 간단한 선언적 코드를 사용하여 인증 계층 뒤에 UI 페이지를 배치할 수 있습니다.

const PrivateComponent = () => {
  return (
    <GateComponent>
      <p>Secret data here, shhhh!</p>
    </GateComponent>
  );
};

---

여러 Children을 갖는 컨테이너

경우에 따라 두 개의 콘텐츠 플레이스홀더가 있는 컨테이너를 만들어야 할 수도 있습니다.

예를 들어 커스텀 Sidebar와 커스텀 콘텐츠를 제공할 수 있는 대시보드가 ​​있을 수 있습니다.

const Dashboard = ({ SidebarComponent, ContentComponent }) => {
  return (
    <div className="dashboard">
      <div className="sidebar">
        <SidebarComponent />
      </div>
      <div className="content">
        <ContentComponent />
      </div>
    </div>
  );
};

---

코드는 매우 간단합니다. 대시보드 컨테이너는 사이드바와 대시보드 본문 모두에 대해 커스텀 React 노드를 허용합니다.

참고: 컴포넌트 Prop 이름을 대문자로 지정하는 것이 중요합니다.

이것이 React가 Dashboard가 prop으로 받은 인수가 실제로 함수형 컴포넌트지 여부를 결정하는 방법입니다.

---

마치며

React 컨테이너 패턴은 ​​UI 코드에서 복잡한 논리를 추상화하는 편리한 방법입니다.

이를 통해 선언적 방식으로 애플리케이션의 공통 로직을 재사용할 수 있습니다.

원문 보기

React Patterns: The Container pattern