[디자인 패턴] atomic design pattern

atomic design pattern 이란?

컴포넌트를 원자단위까지 쪼개서 프로젝트마다 미리 구현된 컴포넌트를 재활용하여

레고블록 쌓듯이 자주쓰는 기능들을 조합해서 다양하게 재사용하기 위한 프론트엔드 개발 방법론

​

프로젝트 구조

atoms (원자단위 필수 컴포넌트)

- button, List, Table, form, pic, text

​

molecules (atom 컴포넌트를 조합한 분자단위 컴포넌트)

- breadcrumbs, card, category, counter, navBar, searchBar, slider

​

organisms (molecules 컴포넌트를 조합한 유기체단위 컴포넌트)

- Header, Footer, Swiper, Visual

​

template (organisms 컴포넌트를 조합한 패턴 템플릿 단위 컴포넌트)

- Layout

​

page (template 컴포넌트를 조합한 페이지 단위 컴포넌트)

- Main Page, Sub page...

 

장점

• 어플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있으며, 스타일 가이드와 같은 도구에서 볼 수 있다. 그리고 통합 개발을 할 때, 백엔드 어플리케이션의 로직에 의존하지 않는다는 장점이 있다.
• 일련의 패턴이 확립되면, 설계 변경이 필요한 경우에 대비하여 더 빠르고 유연성 있는 빌드 프로세스를 가질 수 있다. 또한 기존의 컴포넌트들을 재사용하고 있기 때문에 디자인을 일관성 있게 통일할 수 있다.
• 특정 컴포넌트에 CSS가 강하게 결합되어 있기 때문에 CSS를 훨씬 잘 관리할 수 있다. 이를 위해서는 어플리케이션의 구조에 따라 컴포넌트에서 사용되는 CSS만 렌더링하도록 해야 한다

단점

• 컴포넌트가 분리되어 있고 상위 컨테이너 컴포넌트의 사이즈를 결정할 수 없을 경우, 미디어쿼리를 사용하기 어렵다. 컴포넌트는 너비에 대해 알 수 없기 때문에 실제 페이지의 사이즈가 변경될 때 크기가 조정된다.