디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식이다.
왜 사용하나?
React 는 컴포넌트를 중심으로 만들어지는 UI 라이브러리로, 컴포넌트의 재사용성이 매우 중요하다. 이것을 개발을 진행하면서 일일히 고려하는 것이 어렵기 때문에 결국에는 중복되는 코드가 많아지고, 유지보수가 힘들어 진다.
따라서, 개발 초기 단계부터 컴포넌트를 퍼즐 조립하듯이 사용할 수 있도록 재사용성을 최대화하여 설계하는 것이 중요해졌다.
컴포넌트 중심의 아토믹 디자인 패턴이 이러한 React 의 특성과 잘 맞아 떨어진다.
Atoms(원자)
원자 컴포넌트는 디자인과 기능의 최소 단위이다. 앞으로 만들어나갈 상위 컴포넌트에 재사용하기 때문에 가장 작다. (Ex. Label, Text, CheckBox Button, Icon 등)
Molecules(분자)
원자를 여러 개 조합하여 사용하는 컴포넌트이다. InputForm, Navigation, Card 등을 예로 들 수 있다.
Oraganisms(유기체)
원자와 분자를 조합하여 사용하는 컴포넌트이다. InputForm 을 Header 내에 포함하거나 Card 여러 개를 그리드 형태로 관리하는 것을 예로 들 수 있다. 유기체부터는 명확히 컴포넌트의 사이즈를 설명하기 어렵다. 프로젝트 별로 유기체에 해당하는 컴포넌트 단위가 다를 수 있고, 이를 유기체가 아닌 더 상위 컴포넌트인 템플릿과 페이지로 관리할 수도 있다.
Template(템플릿)
여러 유기체가 모여 있는 단위이다. 여러 개의 Card 그리드를 묶어 하나의 템플릿으로 만들 수 있다.
Reference
https://blog.hyungsub.com/entry/%EC%95%84%ED%86%A0%EB%AF%B9%EB%94%94%EC%9E%90%EC%9D%B8-Atomic-Design-%EC%9B%90%EC%9E%90%EB%8B%A8%EC%9C%84%EB%94%94%EC%9E%90%EC%9D%B8-%EB%B0%A9%EB%B2%95%EB%A1%A0-%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0-%EC%9D%91%EC%9A%A9%ED%95%98%EA%B8%B0
https://tech.madup.com/atomic-design/
https://brunch.co.kr/@skykamja24/580
https://medium.com/@inthewalter/atomic-design-for-react-514660f93ba
이론만 봐서는 잘 와닿지 않는다.. 사이드 프로젝트에 적용해보면서 더 공부해야겠다..
