React) Atomic Design이란?

오랜만에 타입스크립트 코드를 보던 중에 (react 포함) organisms? molecules? 이런 요상한 화학에서 나올법한 단어들을 처음 접해보았다. 뭔가 쪼개서 저장한다는 의미인가?라는 합리적 의심을 했다. 

 

사실 내가 react를 공부할때는 저런 단어를 보지 않고 그저 기본적인 폴더 내에서 코딩을 했던 것 같다. 

 

그래서 react organisms라는 키워드로 구글링을 해보니 Atomic Design이라는 React 기법이라고 한다. 

출처 https://github.com/danilowoz/react-atomic-design

결국 하나하나 작은 단위가 모여서 최종 pages를 완성한다는 느낌이 들었다. 

Atoms > Molecules > Organisms > Templates > Pages 

Atoms들이 모여 Molecules가 되고, Molecules들이 모여 Organisms들이 되고, Organisms들이 모여 Templates가 되고, Templates들이 모여 pages가 되는,, 

 

Templates는 와이어프레임이라고 보면 된다.

 

atomic : atoms (Button, Forms, Icons, Tables...)

Molecules : TokenItem,TokenOrder,~Collection ... 

Organisms : Header, MintingDialog, TokenList, NFTDialog ... 

Templates 

Pages 

 

https://github.com/danilowoz/react-atomic-design