요약
- 프론트 애플리케이션을 구조화하는 방법으로 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념으로 일관된 UI와 유지보수성 향상
- Atom > Molecule > Organism > Template > Page
내용
리액트에서 컴포넌트
- 리액트는 컴포넌트 기반 프로그래밍으로 설계 우선 접근법을 권장한다.
- UI/UX팀은 개발자들이 구현할 수 있는 목업을 만들고, 개발자들은 이를 이용해 UI 컴포넌트 계층으로 세분화 할 수 있다.
왜 아토믹인가?
- 애플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있고 스타일 가이드와 같은 도구에서 볼 수 있다.
- 백엔드 로직에 의존하지 않는다.
- 특정 컴포넌트에 css가 강하게 결합되어 있기 때문에 css를 잘 관리할 수 있다.
구분
- Atom: 단일 HTML (Button, Input)
- Molecule: Atom의 조합으로 도메인이 들어가지 않음 (Search, Cardview)
- Organism: Atom + Molecule의 조합으로 도메인이 들어감 (NovelList, AddForm)
- Template: 데이터가 들어가지 않은 목업 뷰
- Page: 데이터가 들어간 실제 뷰
참고