728x90
- 분자단위로 UI 컴포넌트를 쪼개어 페이지를 구성하는 패턴
- atoms - molecules - oraganisms - templates - pages 단계로 컴포넌트들을 결합
- UI의 시맨틱적으로 가장 작은 단위의 요소들부터 쪼개서 조합하고, 기능적인 부분까지 결합하는 패턴
- 단계를 역으로 하여 분리시켜도 무방
- 간단명료하고 UI 복잡도를 억제, 중복컴포넌트를 방지하고 개발소요시간을 단축한다.
- 컴포넌트 개념에 대한 높은 이해도를 필요로 하기 때문에 러닝커브가 매우 높음
- 사소한 UI를 변경해야하는 컴포넌트 체계에 유연하지 않음
- 리액트 컴포넌트를 전반적으로 잘 이해해야하기 때문에 협업 시 쉽지않음
// Button.js
import React from 'react';
const Button = (props) => (
<button type={props.type} classNmae="~~~~">Click Button</button>
);
export default Button;
// FormControl.js
import react from 'react';
const DefaultFormControl = (props) => (
<div className="form-inline-group">
<label className="form-group-label" htmlFor={props.name}>{props.text}</label>
<input type="text" id={props.name} name={props.name} placeholder={props.text} />
</div>
);
export default DefaultFormControl;
728x90
'웹 프레임워크 > Javascript - React.js' 카테고리의 다른 글
[Javascript] React 디자인 패턴 design pattern presentational & container (0) | 2021.06.29 |
---|---|
[Javascript] React - Recoil 상태관리 라이브러리 (0) | 2021.06.29 |
[Javascript] React Hook Guide (0) | 2021.06.29 |