[React] Container-Presenter 패턴

개요

React의 가장 기본적인 디자인 패턴으로는 Container Presenter 패턴이 있다.

 

container + presenter 패턴은 데이터처리와 데이터출력을 분리 하는 것이다.

 

즉 Container에서는 API Request, Exception Error, state 변경, redux, dispatch...

Presenter에는 props, UI..을 관리하는 것이다.

 

Container에서 처리하거나 받아온 데이터들을 Presenter 컴포넌트에 Props로 넘긴다.

 

예시

// src/components/blog/Blog.js
import React, {Component} from 'react';

class Blog extends Component {
    state = {
        loading: true
    };
    componentDidMount() {
        fetch('/api/blog')
            .then(res => res.json())
            .then(
                posts =>
                this.setState({
                    loading: false,
                    posts
                }),
                error => this.setState({
                    loading: false,
                    error
                })
            );
    }
    render() {
        if ( this.state.loading){
            return <div>Loading...</div>;
        } else {
            this,state.posts.map(post => <div key={post.id}>{post.title}</div>);
        }
    }
}

위 코드는 하나의 컴포넌트 내부에서 api를 통해 데이터를 받아오고 ,그 데이터 컴포넌트 내부에 state로 관리하면서

데이터를 표현하는 구조이다.

 

비록 지금은 단순해보여도 데이터를 처리하는 로직과 UI를 표현하는 로직의 길이가 길어지게 될수록 코드의 가독성이 떨어질 것이다.

 

그래서 Container-Presenter 패턴으로 처리와 출력의 역할을 나워보면 아래와 같이 나눌 수 있다.

// src/components/blog/BlogContainer.js

import React, {Component} from 'react';
import Blog from './Blog';

class BlogContainer extends Component {
    state = {
        loading: true
    };
    componentDidMount() {
        fetch('/api/blog')
            .then(res => res.json())
            .then(
                posts =>
                this.setState({
                    loading: false,
                    posts
                }),
                error => this.setState({
                    loading: false,
                    error
                })
            );
    }
    render() {
        <Blog { ...this.state} />;
    }
}

export default BlogContainer;

container component에는 api에서 데이터를 받아와서 props로 presenter container에 넘겨준다.

---

// src/components/blog/Blog.js

import React from 'react';

class Blog extends Component {
    _renderLoading = () => {
        return <div>Loading...</div>
    };

    _renderError = () => {
        return <div>Error occurs! Please try again.</div>;
    };

    _renderPosts = () => {
        const { posts } = this.props;
        return posts.map(post => <div key={post.id}>{post.title}</div>);
    };

    render() {
        if(this.props.loading) {
            return this._renderLoading();
        } else if(this.props.posts) {
            return this._renderPosts();
        } else {
            return this._renderError();
        }
    }
}

export default Blog;

presenter container 에는 props로 받아온 데이터에 따라 엘리먼트를 출력한다.

즉, UI에 관한 작업만 수행하게 된다.

 

Container Presenter 방식의 장점?

데이터 처리부분과 보여지는 부분이 나뉘어진것이 장점이다.

데이터를 보여주는 부분을 수정하고 싶다면 Presenter파일로 가면 되고, 데이터 요청 및 처리에 관련된 코드를 구현하고 싶다면 Container파일로 가서 코드를 직접 작성하면 된다.

 

참고자료

[React] Container-Presenter 패턴