[이것저것] React 폴더 구조 colocation

놀랍게도 공식 문서에는 정해진 디렉토리 구조를 정해놓고 있지않다. 난 정해주는게 좋은데...🐒 리액트에서는 일반적으로 접근하 수 있는 몇가지 방법을 제시한다.

기능이나 경로에 의한 분류

css, js, test 파일을 기능이나 라우트 분류된 폴더에 같이 두는 방법이다.

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

파일 유형에 의한

이 전글에서 다뤘던 아토믹 디자인을 기반
https://velog.io/@nowwyun/Atomic-Design-%EC%95%84%ED%86%A0%EB%AF%B9-%EB%94%94%EC%9E%90%EC%9D%B8

비슷한 파일끼리 묶어주는 것으로 더 나아가서는 해당 애플리케이션에서 역할에 따라 컴포넌트를 다른 폴더로 분리한다. 번거롭긴 하지만 나는 폴더로 따로 구분하는 것을 선호한다.
예시) 스토리북, 타입스크립트, index, 스타일드 컴포넌트, 타입 지정

components/
  common/
  	Avatar/
      Avatar.stories.tsx
      Avatar.tsx
      index.ts
      Styled.tsx
      types.d.ts
     Feed/
      Feed.stories.tsx
      Feed.tsx
      index.ts
      Feed.tsx
      types.d.ts