⚛️ 아토믹 디자인
🧐 사용이유
- 처음부터 재사용 가능한 컴포넌트를 만들자!
- 디자이너와 개발자간의 협업의 용이성
- 추후 유지보수하는 게 비용(시간) 절감
- 그래서 어느 정도의 시스템을 갖추기까지는 시간이 오래 걸리겠지만, 추후 가속도가 붙고 서로의 코드가 일관성을 갖출 수 있다는 기대감
🙋🏼♀️ 간단한 설명
디자인 시스템을 만드는데 여러가지 방법론중 하나, Atom(원자) 단위로 디자인 및 개발을 진행하는 방법 더 쉽게 말해서 UI 컴포넌트를 가장 작은 단위로 쪼개고 합치며 UI를 마치 레고 블럭 쌓듯이 만들어 나가는 방법
🧐 어떤단위로 나뉘는 걸까??
ATOM
가장 작은 단위의 컴포넌트 보통은 HTML태그들이 Atom의 단위 일 수 있다.
ex) <input>, <button>, <select>
앞으로 계속해서 재사용해나갈 컴포넌트이기 때문에 특정 기능을 수행하는 것이 아니라, 일반적으로 사용할 수 있도록 구현합니다.
Molecules
ATOM 을 여려개 조합한 컴포넌트 입니다.
예를들어 <input> + <label> + <button> 이렇게 조합해서(ATOM을 재사용해서) <FormItem /> 이런식의 컴포넌트를 만들수 있습니다.
Organisms
ATOM 과 Molecule 들 여러개를 조합하여 Organisms 를 만든다.
❗️여러 컴포넌트들을 조합해서 쓰다보니 이쯤되면 재사용성이 조금 떨어지게 됩니다.
Templates
레이아웃을 구성하는 단계, organisms 를 주입 받기 위해서 준비하는 어떤 스타일적 레이아웃 컴포넌트 입니다.
Pages
Template 에 만들어놓은 컴포넌트들을 넣게 되면 비로소 Pages가 완성이 됩니다. 실제로 사용자가 보는 화면과 동일하여 지도록 합니다. 따라서 전체적인 로직이나 상태등을 page 레벨에서 컨트롤 해야한다.
__Pages__ 는 비지니스 로직, 상태를 분리하고, __ATOM__ 과 __Molecule__, __Organisms__ 에서 UI를 관리하면 됩니다@@@
잠실사는 주니어 개발자