[리팩토링] 컴포넌트 정리

참고 자료

• 컴포넌트의 각 단계의 범위, 기준을 명확히 할 필요가 있음 참고 자료
  
• 나름 아토믹하게 구성한 것 같은데 왜 컴포넌트의 갯수가 많아지고 범위가 모호해졌을까? 기능이 아닌 뷰 단위로 나눴기 때문. 전체 화면을 쪼개는 비주얼적인 구성 요소로 나누면 안된다 참고 자료 꼭 읽기!!
  
• 위의 자료를 읽고 선협님 자료를 읽으면 더 잘 와닿는다

우리의 문제점

• view를 구성하는 단위로 나누었다
• 특정 컴포넌트나 도메인에만 쓰이는 컴포넌트도 따로 빼서 만들었다
• molcule, orginizm, template이 전부 domain에 몰려있다

이렇게 구현하면 좋을 것 같습니다

• 일반적인 웹 프로젝트에서 많은 부분들을 재사용하기 어렵다. 재사용 가능한 코드들은 기능에 집중해서 구현해야한다.
• Template폴더도 만들어서 오로지 레이아웃만 결정하는 컴포넌트가 포함되도록하는 것도 좋을 것 같다!
  ex) CardList컴포넌트는 단지 카드들의 레이아웃만 설정하는 거니까 Template폴더에 포함시킨다
• 특정 컴포넌트(또는 도메인)에만 쓰이거나, 기능이 없이 단순한 뷰 요소는 해당 컴포넌트 폴더에 같이 포함시킨다(내부 컴포넌트로 만듦)
• 컴포넌트 구분 기준
  • atoms
    • 하나의 기능
    • 더 이상 나눠지지 않는 최소 요소
    • 재사용 가능한 것만
  • molcules
    • 하나의 역할
    • atom의 그룹
    • 재사용 가능한 것만
  • orginizm
    • 하나의 요구사항
    • atom+molcule+orginizm 모두 조합 가능한 섹션
    • 재사용 불가한 atom,mocule범위 내부 컴포넌트 포함
  • template
    • 단순히 레이아웃만
    • ex) Wrapper, Container
  • page
    • template과 orginizm 을 조합해서 구성
    • 서버 요청해 데이터를 받아 자식들에게 넘겨주는 곳
• 컴포넌트 정리 후 스토리북에 전부 등록하기!!