ATOMIC Design?

가장 작은 컴포넌트 단위를 원자로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드를 재사용을 최대화 하는 방법이다

Every UIUX designers follow Atomic Design System Guideline | 2019 Trends

• Atom
• Molecules
• Organisms
• Templates
• pages

ATOM(원자)

• #Generic #Abstract
• 가장 작은 단위의 컴포넌트
• 원자는 어떠한 context가 주어지든지 이에 해당하는 컴포넌트가 생성될 수 있어야한다
• 다양한 state를 가지고 있어야 하며 추상적이지만 최대한 포용할수 있게 설계되어야한다
  • ex) button: disabled, hover, different sizes, etc.
• 원자는 마진이나 위치값을 가지고 있지 않는다

Molecule(분자)

• #LittleComplex
• 원자를 엮어 조금 복잡한 단위의 분자가 생성된다
• 분자는 분자만의 프로퍼티를 가지고 있을 수 있고, 이를 활용해 원자에 기능을 만들어 줄수 있다