React arc 도입 심각하게 고민 및 arc, AtomicDesign 공부해보기.

[yearsalary]

1.상황: 컴포넌트가 많아져서 분류, 설계가 고민이 되기 시작했습니다. 현재는 페이지를 구성하는 부분, 요소등을 컴포넌트로, 혹은 페이지를 컨테이너 로만 분리하고있습니다.

2.문제: 컴포넌트 세분화에 적절한 규칙의 필요성을 느끼고 있습니다.

3.해결책: AtomicDesign 과 arc (react starter kit) document 와 example 코드에서 어떻게 컴포넌트들을 분류하고 concern 을 분리하는지 살펴보는게 좋은 것 같습니다.

[yearsalary]

Atomic Design 에 대하여...http://bradfrost.com/blog/post/atomic-web-design/ 화면을 구성하는 디자인 시스템을 체계적으로 구성하는 방법론 이다.

React 에서 적용시,

1. Atoms: html 기본 태그 또는 html tag 를 렌더하는 React Component 또는 서드파티 컴포넌트.
2. Molecules: Atoms 를 모아 렌더하는 컴포넌트.
3. Organisms: Atoms, Molecules 를 렌더 하거나, 또다른 Organisms 를 렌더하는 컴포넌트.
4. Templates: Pages 의 레이아웃을 정하는 컴포넌트.
5. Pages: 대부분 Organisms 로 구성 된 컴포넌트.

[yearsalary]

Components 와 Containers, pure Component 에 대하여... https://github.com/diegohaz/arc/wiki/Containers

1.Components: presentational logic 에만 집중합니다. 이와 같은 UI 컴포넌트를 pure Component 입니다.

2.Containers: presentational logic 외에 다른 concern 을 처리하는 logic 및 redux store에 connect 하는 코드등이 필요한 경우 import 하는(contain 하는) pure component 이름과 같은 container 를 생성합니다.