📖 아토믹(atomic) 디자인 패턴
💬 정의
- 가장 작은 컴포넌트 단위를 원자로 설정하고 이를 바탕으로 상위 컴포넌트를
만들어 코드의 재사용을 최대화하는 패턴
- 상위 컴포넌트는 순서대로 분자(Molecules), 유기체(Organisms), 템플릿(Templetes)으로
가며 최종적으로 페이지(Pages)를 관리
💬 단위
📌 원자(Atoms)
- 디자인과 기능의 최소 단위
- 상위 컴포넌트에서 재사용을 가장 작고 미니멀하게 제작
- 예시 : 레이블(Label), 텍스트(Text), 컨테이너(Container), 버튼(Button), 아이콘(Icon) 등
📌 분자(Molecules)
- 원자의 한단계 위 컴포넌트
- 예시 : 입력 폼(Input forms), 네비게이션(Navigation), 카드(Card) 등
📌 유기체(Organisms)
- 분자를 묶어 관리하는 컴포넌트
- 예시 : 입력 폼과 함께 헤더를 감싸거나, 여러 카드를 관리하는 그리드 등
📌 템플릿(Templetes)
- 여러 유기체를 묶어서 관리하는 컴포넌트
- 예시 : 카드 그리드를 묶어 관리하는 템플릿
💬 단점
- 컴포넌트 간의 의존성과 복잡도가 까다로움
- 그렇기에 기능이 추가되야하는 유기체 컴포넌트 등을 새로 만들어야 하는 경우가 온다면
하위의 모든 컴포넌트를 바꾸게되는 상황이 발생할 수 있음
- 이러한 경우가 많이 발생한다면 원자 컴포넌트가 난잡해지며 각 원자 컴포넌트가
어떤 기능을 하는지 명확히 구분하기 어려워짐
- 또한 하위 컴포넌트에서 예상치 못한 에러가 발생하게 되면 포함하고 있는 모든
상위 컴포넌트가 문제가 발생할 수 있음
💡 답변
아토믹 디자인 패턴에 대해 아는가?
프로젝트 진행간 공용 컴포넌트를 만들면서 적용해보려고 시도를 해봤었습니다.
가장 작은 컴포넌트를 원자(atoms) 단위로 설정하고 이를 바탕으로 상위 컴포넌트를
만들어 코드의 재사용을 최대화하는 패턴이며 상위 컴포넌트는 원자로 구성된 분자,
유기체, 템플릿을 거쳐 최종적으로 페이지를 관리하는 방식입니다.
단점으로는 컴포넌트 간의 상하로 의존성이 있어 하위 컴포넌트에 에러가 발생하면
포함하고 있는 모든 상위 컴포넌트에 문제가 발생합니다.
presentational & container 디자인 패턴으로 결국 변경하긴했습니다.
😍 참조
Brunch
