컴포넌트 설계
atomic 디자인
아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 효과적인 인터페이스 시스템을 만든다.
- atoms:버튼, 제목, 텍스트 입력 필드와 같은 가장 작은 구성 컴포넌트,더 이상 분해 될 수 없는 필수 요소
- molecules:HTML 텍스트 입력 필드, 레이블, 오류 메세지 또는 HTML 텍스트 입력 필드와 버튼으로 구성된 검색 컴포넌트
- organism: 분자, 원자 또는 다른 유기체의 그룹으로 구성된 비교적 복잡한 그룹, 보통의 컴포넌트(함수 단위)가 여기 속함
- template : 컴포넌트들을 배치하고 설계의 구조
- pages:페이지는 실제 컨텐츠들을 배치한 UI를 보여주며, 템플릿의 구체화된 인스턴스
장점
- 어플리케이션과 분리하여 컴포넌트 개발 테스트 가능, 백엔드와의 분리
- 패턴이 확립이 되면 프로젝트마다 설계 시간이 최소화되고, page, atom 단위의 확인이 가능하다는 점
- 특정 컴포넌트에 CSS가 강하게 결합 CSS를 훨씬 잘 관리할 수 있다.
단점
- 기능이 커지게 되면 코드량이 늘어나고 파악이 쉽지 않다는 점
- 상위 컴포넌트에 대한 확인 불가
