아토믹(Atomic) 컴포넌트 디자인 개발 패턴
계약직으로 잠깐 일했을 때, 사용했던 디자인 패턴이 있었다.
바로!!!!!
아토믹(Atomic) 디자인 패턴이었다.
사이드 프로젝트, 토이 프로젝트만 주구장창하던 내게 실제 현업에서 적용되는 이런 패턴은 처음이라..ㅎ
낯설었던 그때의 기억을 되살려 포스팅하려고 한다. 🥹
프로젝트 투입된지 한 달이 넘어가던 어느날 갑자기 호출되었다.
"우리가 디자인 패턴을 도입하려고 하는데, 아토믹 패턴이라고..."
네?? 그게 뭐죠????? (당황)
그리고 설계 단계에서부터 적용했어야 하는거 아닌가? 아니면 벌써 리팩토링하는건가..??
작업과 동시에 새롭게 다시 패턴을 고려하여 컴포넌트가 재정비가 필요해질 것 같아 그 날은 멘붕 그 잡채였다.
우리가 진행하는 프로젝트는 그다지 큰 규모가 아니었기에 따로 정해진 디자인 패턴이 없이 진행되고 있었다.
그래도 어떡해... 해내야지.....
우선, 아토믹 디자인 패턴의 개념부터 알아야 했다.
아토믹 디자인 패턴은 가장 작은 컴포넌트 단위를 원자(Atoms)로 설정하고, 이를 토대로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론이다.
찾아보니 오래전부터 사용되던 개발 방법론 중 하나인 것 같았다.
하지만 컴포넌트 간 의존성이 상하로 존재하기 때문에 하위 컴포넌트에서 버그가 발생하면, 모든 상위 컴포넌트가 엉망이 될 수 있는 단점이 있어 보인다.
이를 보완하기 위해서는 원자 단위의 컴포넌트와 이벤트 처리에 대해서 관리를 잘 해야겠지?
그럴려면 데이터 처리가 되는 비즈니스 로직은 분자 단위 컴포넌트에서 관리하는게 좋겠군!!
원자(Atoms) - 분자(Molecules) - 유기체(Organisms) - 템플릿(Templates) - 페이지(Pages)
원자(Atoms)
원자 컴포넌트는 디자인과 기능의 최소 단위라고 할 수 있다.
앞으로 만들 상위 컴포넌트에 재사용되어야 하기 때문에 더 쪼개질 수 없을 정도로 가장 작고, 미니멀하게 제작한다.
대표 컴포넌트는 Label, Text, Container, Button, Icon 등이 있다.
분자(Molecules)
원자보다 한 단계 위의 컴포넌트다.
보통 프론트 개발에서 컴포넌트를 구성할 때 가장 많이 만드는 단위이다.
대표 컴포넌트는 Input forms, Navigation, Card 등이 있다.
유기체(Organisms)
분자 단위를 묶어 관리하는 컴포넌트다.
유기체는 명확한 컴포넌트의 사이즈를 설명하기 어려우며, 프로젝트의 상황별로 다를 수 있다.
템플릿(Temlates) / 페이지(Pages)
여러 유기체를 모아 관리하는 컴포넌트다.
템플릿과 페이지는 프로젝트의 상황에 맞게 맞춰 사용할 수 있다.
🌟 Ta-da!
처음에 디자인 패턴에 맞게 컴포넌트를 쪼개는 작업중 일 때...
아 왜 이제와서 이걸 하는거지, 아..할 거 많은데... 하는 생각이 끊임없이 들었다..🤣
하지만 구조를 완성하고 난 뒤엔...
원자 컴포넌트는 최대한 건들지 않은 채 분자 컴포넌트에서 비즈니스 로직을 조작하다 보니
컴포넌트를 재사용 하기에도 편리하고, 버그가 현저히 줄어들었다.
다음 토이 프로젝트 때도 아토믹 패턴을 한번 적용해보고 더 연습해봐야지~
<Ref>
https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole
https://youtu.be/33yj-Q5v8mQ?si=8oGw3Q0z-Tcachc3
