컴포넌트 구성 - routinder/routinder_front GitHub Wiki

FE 컴포넌트 구성

atom

  • 재활용이 가능한 수준의 최소 ui 단위
  • html tag 수준의 작은 단위를 의미합니다
  • 폴더 구분은 기능이나 페이지 단위가 아닌, UI 종류에 따라서 분류합니다

molecule

  • atom의 묶음
  • 로직은 포함하지 않습니다
  • 폴더 구분은 기능이나 페이지 단위가 아닌, UI 종류에 따라서 분류합니다

organism

  • presentational component(atom or molecule)을 필요한 로직을 감싼 custom hook과 묶어둔 단위

atom 👉 molecule 👉 organism

위의 순서로 합성된다고 이해하면 됩니다.