아토믹 디자인 패턴

원문
아토믹 디자인 패턴이란 컴포넌트를 재사용성이 강하고 단단하게 설계하는 디자인 패턴으로,
리엑트나 뷰와같은 컴포넌트 단위 프론트 프레임워크를 사용할 때 적용하는 방식입니다.
마치 화학처럼 원자가 모여 분자가 되고, 분자가 모여 하나의 유기체가 되어서,
최종적으로는 잘 조립이 되어서 하나의 결과물을 구성하게 됩니다.
따라서 이 디자인 패턴을 잘 적용하면 공통 컴포넌트를 통해 개발속도가 향상되고
각 페이지들이 통일성 있으면서도, 다양한 기능을 구현 가능케 합니다.

Atoms(원자)

Input이나 Button, H1, H2와 같은 순서 HTML 태그를 구성합니다.
더 이상 쪼개질 수 없고, 마진이나 위치값을 가지지 않습니다.
또한 state와 props를 다양하게 가져서 최대한 포용력 있게 구성해야 합니다.

Molecules(분자)

분자는 원자들이 모여서 이루어지며, 체크박스가 여러개 모인 리스트라던가,
혹은 Input태그와 Label태그와 Button 태그가 합쳐져서 하나의 검색창의 단위를 가집니다.

Organisms(유기체)

유기체는 분자나 원자들이 합쳐져서 생성되고, 분자나 원자의 위치값을 조정합니다.

Templates(템플릿)

템플릿은 페이지의 그리드를 정해주는 역할을 합니다.

Pages(페이지)

앞서 위에 있던 요소들이 모여서 하나의 페이지가 만들어지게 됩니다.
템플릿을 잘 활용하여 페이지를 만드는 것이 통일감 있는 페이지가 만들어집니다.