Container + Presenter Pattern 디자인 패턴

함수형 컴포넌트와 Hook이 사실상 표준이 되면서 이 패턴은 구식이 되었다. 종종 컴포넌트 하나가 너무 커질 때 이 패턴으로 구분하기도 하지만 일반적으로 사용되지는 않는듯.

 

 

container presenter pattern 코딩 패턴이다. express에서 MVC design pattern에 근거해서 코딩 했듯이 React.js에서 사용하는 코딩 패턴이다. container 컴포넌트와 presenter 컴포넌트를 분리하는 것이 포인트이다.

 

container 컴포넌트는 논리 담당이다. data와 api, 논리 구조, state(상태값)를 갖고 있다. 클래스 컴포넌트이다.

presenter 컴포넌트은 시각 담당이다. data를 보여준다. state도 없고 클래스도 없는 함수형 컴포넌트가 주이다.

 

다음과 같이 Routes에 한 폴더가 Container, Presenter, index로 이루어져 있다.

 

 

 

Presenter에서 유저에게 보여지는 부분을 담당하고 Container는 이를 가공하고 index는 경로 입력시 Container를 export한다. (index.js는 사실상 껍데기이다 ../Routes/Home처럼 파일의 경로 입력시 자동으로 index.js를 출력하기 때문에 입력한 것.)

 

 

이 3개의 대략적인 구조는 다음과 같다.

 

// HomePresenter.js

export default () => "home";

// HomeContainer.js

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

export default class extends React.Component {
  state = {
  };
  render() {
    const { } = this.state;
    return (
      <HomePresenter />
    );
  }
}

//index.js
import HomeContainer from "./HomeContainer";

export default HomeContainer;

 

---

 

이번에 가상화폐 정보를 통해 프론트로 뿌려줄 일이 있어서 활용 예를 직접 가져와 봤다.

import axios from "axios";

// axios.get을 통해 정보를 가져옵니다.
export const coinApi = {
  coin: () => api.get("https://api.coinpaprika.com/v1/coins"),
};

import React from "react";
import { coinApi } from "../api";
import CoinsPresenter from "./CoinsPresenter";

export default class extends React.Component {
  state = {
    coin: null,
    isLoading: true,
    error: null,
  };

  async componentDidMount() {
    try {
      // axios를 통해 가져온 정보를 coin 객체에 담습니다.
      const coin = await coinApi.coin();
      // 담은 후 State를 업데이트해줍시다.
      this.setState({ coin });
    } catch (error) {
      this.setState({ error: "Can't find coin info" });
    } finally {
      this.setState({ isLoading: false });
    }
  }
  render() {
    const { coin, error, isLoading } = this.state;
    return (
      <>
        // 가져온 정보를 Presenter에게 props로 넘겨줍니다.
        <CoinsPresenter coin={coin} error={error} isLoading={isLoading} />
      </>
    );
  }
}

import React from "react";
import Loader from "../Components/Loader";

class CoinPresenter extends React.Component {
  render() {
    const { coin, error, isLoading } = this.props;
    // coin 객체에 정보가 담겨있으므로 이를 잘 이용해서 가공하면 됩니다.
    return (
      <div>
        {isLoading ? (
          <Loader />
        ) : (
          coin.data.map((e) => (
            <div>
              #{e.rank} {e.name}/{e.symbol}
            </div>
          ))
        )}
        {error && <div>{error}</div>}
      </div>
    );
  }
}

export default CoinPresenter;