presentational & container

로직을 수행하는 컴포넌트, UI를 보여주는 컴포넌트가 분리된 패턴이다.

앱의 기능과 ui에 대한 구분이 쉽다.

재활용 사용성도 크다.

presentational

• 프레젠테이션 ( 팔레트 역할 )
• prop의 함수에 의해 state를 변경 (엄격하게 지켜야 하는 규칙은 아니다)
• 순수(pure) 함수인 경향이 있다,
• 종종, this.props.children을 통해 컴포넌트가 렌더된다.

// CommentListPresenter.js
import React from "react";

const Commentlist = comments => (
  <div>
    {comments.map(({ body, author }) => (
      <p>
        {body}-{author}
      </p>
    ))}
  </div>
);

container

• 스타일을 사용하지 않는다.
• 데이터와 데이터 조작에 관한 함수를 만들고 present component에 제공

// CommentListContainer.js
import React from "react";
import CommentList from "./CommentList";

const CommentListContainer = () => {
  constructor() {
    super();
    this.state = { comments: [] };
  }

  componentDidMount() {
    fetch("/my-comments.json")
      .then(res => res.json())
      .then(comments => this.setState({ comments }));
  }

  return <CommentList comments={this.state.comments} />;
}