건축가가 생각하는 길 - Atomic Design

구성 요소 디렉터리 구성 혼란

드디어 비동기식 처리까지의 나는 조립품 개발을 조금씩 추진했다.
이럴 때
큰 기능이 있는 페이지 만들기
↓
만약 프로그램의 전망이 나빠졌다고 생각한다면, 분할할 수 있는 곳을 내놓아라
이런 순서로 기능을 만들었어요.
이렇게 되면 목록 구성은 나도 모르는 상태가 된다.
디렉토리 구성

나도,sub 디렉터리가 뭐야...의 상태.이렇게 되면 멀티플레이어 개발 등이 꿈의 또 다른 꿈이 된다.

그래서 제가 구성 요소의 분할 방법을 찾아봤어요.

React 전용은 아니지만 Atomic Design 이런 디자인 방법은 많은 프로젝트에서 채택된 것 같습니다.
개인적으로 상술한 사이트에 기술된 Atomic design is for user interfaces 항목은 이해하기 쉽다.

우리는 어떤 단위로 구성 요소를 구분하고 가능한 한 지표에 따라 개발할 것이다.
구체적으로 ATOMS → MOLECULES → ORGANISMS → TEMPLATES → PAGES의 순서를 의식하면서 구성 요소를 만든다.
창설된 대상의 수가 많이 늘어나지만 스토리북을 사용하면 구성 요소 단위로 동작을 확인할 수 있어 좋은 점이 많다.

Redux란 무엇입니까?

Atomic Design을 엄격히 따른다면 데이터 Pages connect 를 얻어야 할 수도 있지만, 현재 Organisms 에서 연결을 하고 있습니다.Pages가 연결되면 하층 부품이 사용하는 특성을 파악해야 하기 때문에 결과Pages가 알고 있는 정보가 과잉될 수 있기 때문이다.
그래서 제 프로젝트에서 다음과 같은 생각으로 활용하고 있습니다.

Pages → React Router에서 지정한 마이그레이션 목표

Organisms → Redux에 연결된 구성 요소

참조 사이트

각양각색의 사이트를 봤는데 역시 다들 운용이 힘들어요...지금 이런 정답은 없는 것 같습니다.

아토믹 디자인이 궁금해요.

원자 설계가 React Component 시점에서의 해석과 의문점