Presetational and Container Component Pattern

데이터 처리와 데이터 출력을 분리하는 패턴.

  • Container Components

    • 컨테이너 컴포넌트에서는 주로 데이터 fetch가 이루어짐

    • 연관이 있는 서브 컴포넌트를 렌더링.

    • DOM Markup, 스타일이 없음

    • 상태 유지 성향을 가지고 있음

      import React, { useState, useEffect } from 'react';
  import List From './List';

  const ListContainer = () => ()
      let [itemList, setList] = useState();

      useEffect = (() => {
          ...
      }, []);

      return <List items = {itemList}/>
  }

  • Presentational Components

    • 화면에 보여지는 것들을 담당하는 Components. (DOM marckup, style)

    • Props를 통해서 데이터나 callback을 받아 올 수 있다.

    • 뷰에 필요한 state를 가지고 있을 수 있다.

    • 상태 유지가 없는 성향.

      import React from 'react';

const List = itmes => {
    <>
    <ul>
      {itmes.map(({body, author}) => (
        <li>
        {body} - {aution}
        </li>
      ))}
    </ul>
    </>
}

이 패턴으로 컴포넌트를 작성하면 작업을 하는 앱과 UI를 이해하기 쉽게 만들 수 있다.
같은 UI를 사용할 수 있기 때문에 다른 상태를 나타내는 컨테이너를 만들어서 재사용할 수 있다.
똑같은 마크업 형식을 여러 컨테이너에 작성하는 작업을 피할 수 있다.



Atomic Design Pattern

디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식

Atoms -> Molecules -> Organisms -> Templates -> Pages


  • Atoms

하나의 구성 요소. 본인 자체의 스타일만 가지고 있으며 다른 곳에 영향을 미치는 스타일은 적용되지 않아야 한다. 원자는 Form labels, inputs, buttons와 같은 basic html elements를 포함.


const Button = ({ type = 'button', children = ''}) => (
    <button type={type}>{children}</button>
)


  • Molecules

Atoms가 모여서 만들어지는 하나의 구성 요소.

Atom 단위인 input label, input, buttom를 합쳐 새로운 의미있는 단위를 만든다. 실제로 동작할 수 있게 됨.


  • Organisms : 분자들의 모음

Organisms (유기체)는 분자들의 모음으로 복잡한 구조를 가지고 있다. 서로 동일하거나 다른 molecules (분자)로 구성될 수 있다.

Organisms는 로고, 검색, 채널리스트와 같은 다양한 컴포넌트 (molecules)로 구성될 수 있다.


  • Templates : 유기체들을 모아 템플릿으로 생성, 스타일링에 집중한 단위

페이지의 최종 내용보다는 페이지의 기본 내용 구조에 초점을 맞춘다.


  • Pages : 실제 페이지를 구성

실제 대표적인 콘텐츠가 배치된 UI의 모습을 보여주는 템플릿의 특정 인스턴스.

Pages 단위에서 어플리케이션 상태 관리가 이루어져야 한다.


Higher-Order Components (HOC)

컴포넌트를 매개변수로 받아 새로운 컴포넌트를 리턴해 주는 Javascript Function.

컴포넌트의 로직을 재사용하길 원할 때 유용.

파라미터로 컴포넌트를 받아오고 함수 내부에서 새 컴포넌트를 만든 다음에 해당 컴포넌트에서 파라미터로 받아온 컴포넌트를 렌더링하는 것.

with____ 로 파일명 작성

import React, { Component } from 'react';

const withRequest = (url) => (WrappedComponent) => {
  return class extends Component {
    render() {
      return (
        <WrappedComponent {...this.props}/>
      )
    }
  }
}

export default withRequest;

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

class Post extends Component {
  render() {
    const { data } = this.props;

    if (!data) return null;

    return (
      <div>
        { JSON.stringify(this.props.data) }
      </div>
    );
  }
}


export default withRequest('https://url')(Post);

컴포넌트를 내보낼 때 사용하면 된다.