Container/Presentational Pattern

- 애플리케이션 로직과 뷰(UI)를 분리한 패턴

- UI 구분이 쉬워지며 모킹, 스토리북을 더 쉽게 사용할 수 있습니다.

 

 

• Presentational Components : 데이터가 사용자에게 어떻게 보여지는지 신경쓰는 컴포넌트. 즉, UI.
• Container Components : 어떤 데이터가 사용자에게 보여 지는지 신경쓰는 컴포넌트 . 즉, API 통신 등을 담당. 

 

 

Container Components

import { useState, useEffect } from "react";

export default function useDogImages() {
  const [dogs, setDogs] = useState([]);

  useEffect(() => {
    async function fetchDogs() {
      const res = await fetch(
        "https://dog.ceo/api/breed/labrador/images/random/6"
      );
      const { message } = await res.json();
      setDogs(message);
    }

    fetchDogs();
  }, []);

  return dogs;
}

 

 

 

Presentational Components

import React from "react";
import useDogImages from "./useDogImages";

export default function DogImages() {
  const dogs = useDogImages();

  return dogs.map((dog, i) => <img src={dog} key={i} alt="Dog" />);
}

 

 

 

다른 예시

const FaceLoader = () => { // Container with Suspense
  return (
    <Suspense fallback={<Loading />}>
      <FaceFetcher />
    </Suspense>
  );
}
const FaceFetcher = () => {  // Container
  const [face] = useFetch('face');
  return <Face face={face} />;
};

const Face = ({ face }) => { // Presentational
  return (
    <>
      {'...'}
      {face}
      {'...'}
    </>
  );
};

 

react-query, suspense, errorboundary 여러 라이브러리의 조합

function Main() {
  return (
    <ErrorBoundary fallback={<div>에러 발생!</div>}>
      <Suspense fallback={<div>로딩 중...</div>}>
        <UserInfo />
      </Suspense>
    </ErrorBoundary>
  )
}

function useUser() { // useQuery 분리
  return useQuery(
    `getUser`,
    () => {
      return apiClient.get<User>(`URL`)
    },
    { suspense: true }
  )
}

function UserInfo() {
  const { data: user } = useUser() // UI만 신경쓰게 하자 
  return <div>{user.name}</div>
}

 

 

출처:

https://www.patterns.dev/posts/presentational-container-pattern/

Container/Presentational Pattern

https://fe-developers.kakaoent.com/2022/220609-storybookwise-component-refactoring/

스토리북 작성을 통해 얻게 되는 리팩토링 효과