리액트 프로젝트 폴더 구조

https://www.youtube.com/watch?v=UUga4-z7b6s&list=LL&index=2

Junior vs Senior React Folder Structure - How To Organize React Projects - Web Dev Simplified

강의를 듣고 정리해봤다.

구조

• assets : 공통으로 사용하는 .css , 이미지 등
• components : 공통으로 사용하는 컴포넌트
  • ui, form 디렉토리를 따로 둬서 관심사 별로 분리
• context : 공통으로 사용하는 컨텍스트
• data : 공통으로 사용하는 데이터 ex) 리덕스, 리코일 등의 상태 저장소, json 파일, 상수 등
• features : 특정 주제(ex) auth, user, stats)에 관한 components, hooks ,services등을 모아 놓는다. 재귀형태로 큰 프로젝트 구조가 각 주제별로 또 디렉토리로 들어가 있다.
• hooks : 공통으로 사용하는 훅들
• layouts : 페이지에서 사용하는 레이아웃 ex) 사이드바, 내브바, 페이지 컨테이너 등
• pages : 각 페이지들을 디렉토리로 둔다.
  • 각 디렉토리 내부 ex) Home, Login 에는 해당 페이지에서만 사용하는 모든 코드 (훅,컴포넌트 등)들이 들어간다.
  • 해당 컴포넌트를 묶어서 페이지를 리턴하는 컴포넌트는 index.tsx로 넣는다.
• services : 페이지 로깅, 분석, 데이터 페치 등의 코드들
• types: 공통으로 사용하는 타입들
• mocks: 모킹함수들 모음
• utils : 유틸 함수들, 각 유틸 함수는 순수함수로 구성한다. (외부 요인에 따라 결과값이 달라지지 않도록), 그리고 파일 하나당 유틸 함수 하나만 export하고 디렉토리 내부에 index.js를 둬서 재export하게 해서 사용

테스트 폴더

tests 폴더는 각 디렉토리 내부에 위치하도록 한다. 테스트 파일과 테스트할 파일의 위치를 최대한 가깝게 한다.

적용

현재 진행중인 excel-editor프로젝트에 적용해봤다.

이전 구조는 다음과 같다.

• components
• constants
• context
• hooks
• layout
• mocks
• types
• utils
  App.tsx
  index.scss
  index.tsx
  기타 설정파일..(ts, lint, prettier 등등)

constants -> data로 디렉토리명 변경, services는 외부 데이터페치나 로깅하는 로직이 없기 때문에 따로 두지 않았다.
기존에도 어느 정도 구조를 신경써서인지 크게 바꿀 부분이 없었다.

내 fe-jhw-create-react-app에 기본 디렉토리 구조를 넣어놨다.
https://github.com/fe-jhw/react-boilerplate