presentational & container 디자인 패턴

Presentational and Container Pattern 이란?

데이터를 다루는 부분(Container)과 화면을 표현하는 부분(Presentational)으로 나눠서 개발하는 패턴

예시는 구조분해 하기전 무한스크롤 입니다.

import { useQuery, gql } from "@apollo/client";
import styled from "@emotion/styled";
import InfiniteScroll from "react-infinite-scroller";

const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
      contents
    }
  }
`;

const MyRow = styled.div`
  display: flex;
`;

const MyColumn = styled.div`
  width: 25%;
`;

export default function MapBoardPage() {
  const { data, fetchMore } = useQuery(FETCH_BOARDS); // 추가적으로 10개를 더 패치를 할게!

  const aaa = () => {
    if (!data) return;
    // refetch와 달리, fetchmore는 추가 조회
    fetchMore({
      variables: { page: Math.ceil(data.fetchBoards.length / 10) + 1 },
      // FETCH_BOARDS에서 받은 useQuery를 수정
      updateQuery: (prev, { fetchMoreResult }) => {
        // prev (이전 데이터) , fetchMoreResult: fetchMore로 쿼리 해온 데이터갯수
        if (!fetchMoreResult.fetchBoards)
          // fetchMoreResult에 패치보드에 데이터가 없을때
          return { fetchBoards: [...prev.fetchBoards] };
        // 이전데이터 패치보드를 보여주고
        return {
          // 데이터가 잇으면 이전 데이터 30개와 불러오는 데이터 10개를 더해서 보야줘라
          fetchBoards: [...prev.fetchBoards, ...fetchMoreResult.fetchBoards],
        };
      },
    });
  };

  return (
    <InfiniteScroll
      pageStart={0}
      loadMore={aaa}
      hasMore={true}
      loader={
        <div className="loader" key={0}>
          Loading ...
        </div>
      }
    >
      {data?.fetchBoards.map((el: any) => (
        <MyRow key={el._id}>
          <MyColumn>{el._id}</MyColumn>
          <MyColumn>{el.writer}</MyColumn>
          <MyColumn>{el.title}</MyColumn>
        </MyRow>
      )) || <div></div>}
    </InfiniteScroll>
  );
}

// 자식이 없으면 로딩 화면을 보여주기

저는 구조분해 4가지로 해서 나눴습니다.

컨테이너

container: 기능을 담당하는곳입니다.

query : 는 스크롤를 내리면서 가져올 데이터 쿼리를 작성한곳입니다.

presenter , styled : html 태그와 스타일을 담당하는부분입니다.

types: 컨테이너 기능들을 presenter로 물려주면서 타입을 작성한곳입니다.

구조분해 하면서 가능 힘들었던건 데이터 주고받고 하는 기능들이 생각보다 잘 흘러가지 않았고 타입스크립트에서 생기는 오류때문에 시간을 많이 썻습니다...ㅜ
물론 개발자의 퍼포먼스가 빨라 지고 유지보수 하는데 있어 이점도 있을거란 생각도 들지만 아무런 이유 없이 이 패턴을 적용한다면 더 많은 파일과 컴포넌트를 만들게 되면서 버그가 발생할 수도 있고 코드베이스가 복잡해질 수도 있을거라고 생각합니다...ㅜ