서론

프로젝트를 진행하다가 막히는 부분이 있어 구글링을 하면
각기 다른 디렉토리 구성과 엉켜있는 컴포넌트 구조에 더욱 혼란을 겪는 경우가 있었습니다.
불문율의 Universal한 디렉토리 구성이 궁금해져 조사해보았습니다.

본론

초기 디렉토리 구성

📁node_modules

• Create React App(CRA)를 구성하는 모든 패키지 소스코드가 존재하는 폴더

📄package.json

• CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일

📁src

• index.js을 포함
• React의 시작

  ReactDOM.render(<App />, document.getElementById('root'))

• ReactDOM.render의 인자는 두개. 첫번째 인자는 화면에 보여주고 싶은 컴포넌트,
  두번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치

📄App.js

• 현재 화면에 보여지고 있는 초기 컴포넌트 (최상위 컴포넌트)

각 디렉토리 구성

📁src

• Assets
  * 프로젝트에서 사용할 이미지, 비디오, json파일 등 미디어 파일들을 저장하는 폴더.
• Components
  * 공통 컴포넌트 (Header, Footer, Nav 등).
• pages
  * 페이지 단위의 컴포넌트 폴더로 구성.

🚩components vs pages

• 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리.
• 한 페이지에서 단독으로 쓰이는 컴포넌트의 경우 pages 하위폴더에서 관리.

📁styles

• styled-components 사용 시
  Home.style.js => css 초기화
  theme.js => 공통으로 사용하는 css 속성 정의
  이외에 media.js 등등 다양한 css 파일을 속성에 맞게 분류하여 모듈화
• sass 사용 시
  reset.scss => css 초기화
  common.scss => 공통으로 사용하는 css 속성 정의
  

📁services

• javascript 모듈을 저장하는 폴더.
• components 폴더보다는 덜 중요하지만 애플리케이션에서 여분으로 사용되는 만들때 편리한 모듈들을 담는 폴더.

📁services

• 상수나 공통 함수, 유틸을 저장하는 폴더.

📁hoc

• 함수형 컴포넌트를 사용하면서 커스텀 훅을 모듈화하여 담아놓는 폴더.

📁context

• Context API로 프로젝트를 작업하는 경우 관련 API를 담아놓는 폴더.

📁store

• 전역상태 관리.
• 일반적으로 하위에 Actions, Reducers, Types의 세가지 주요 부분으로 구성.

다양한 디렉토리 구조

결론

여러 블로그를 살펴보니, 저마다 프로젝트마다 다양한 방식으로 디렉토리를 편성합니다.

다양한 문서를 참고하여 효율적인 디렉토리 구성을 하시길 바라며
이 포스트가 여러분의 레퍼런스의 한 일환이 되길 바랍니다.