[개발일기] Container-Presenter 패턴

최근 프로젝트를 진행하면서 Container-Presenter Pattern 을 알게 되었다.

💎 Container-Presenter Pattern

Container-Presenter Pattern는 react에서 기본적인 디자인 패턴 중 하나이다.
기능(로직)과 UI를 분리하여 개발 할 수 있는 디자인 패턴으로 후에 유지보수적이나 재사용성이 높은 방법이다.

Container에서 데이터를 처리하여 Presenter의 props로 전달한다.

💎 Container

Container는 로직을 처리하는 컴포넌트이다.

• API Reqeust
• Exception
• setState
• redux

Container-Presenter패턴을 적용하였던 프로젝트 일부 코드이다. 아래 코드를 보면 API요청과 state관리를 모두 MovieContainer에서 사용하고 있다. 그리고 state를 MoviePresenter에 props로 전달해주고 있다.

export class MovieContainer extends React.Component {
  state = {
    nowPlaying: null,
    error: null,
    loading: true,
  };

  async componentDidMount() {
    try {
      const { data: { results: nowPlaying }} = await moviesApi.nowPlaying();
      this.setState({ nowPlaying});
    } catch {
      this.setState({ error: "Can't find movies information" });
    } finally {
      this.setState({ loading: false });
    }
  }

  render() {
    const { nowPlaying error, loading } = this.state;
    return (
      <MoviePresenter
        nowPlaying={nowPlaying}
        error={error}
        loading={loading}
      />
    );
  }
}

💎 Presenter

Presenter는 전달받은 props를 보여주는 역할을 하는 컴포넌트이다.

• props
• UI
• no state

MoviePresenter는 MovieContainer에서 받아온 props를 화면에 보여준다.

const MoviePresenter= ({ nowPlaying, loading, error }) => (
  {loading ? (
    <Loader />
  ) : (
    <Container>
      {nowPlaying.length > 0 && nowPlaying && (
        <Section title="Now Playing!">
          {nowPlaying.map((movie) => (
            <Poster
              key={movie.id}
              id={movie.id}
              rating={movie.vote_average}
              title={movie.original_title}
              imageURl={movie.poster_path}
              year={movie.release_date && movie.release_date.substring(0, 4)}
              isMovie={true}
            />
          ))}
        </Section>
      )}
      {error && <Message text={error} color="#e74c3c" />}
    </Container>
  )}
);

💡 느낀점

이번에 Container-Presenter pattern을 사용해보며 기존에 작성했던 코드를 비교해보는 시간을 가졌다. 기존에 코드와 비교했을 때 확실히 코드를 기능과 UI로 분리하여 작성하니 가독성이 좋아진 것을 확인할 수 있었다. 코드를 수정할 때에도 좀 더 쉽게 작업할 수 있었다. 앞으로는 다양한 디자인 패턴들을 공부해보고 사용해봐야겠다.