관리 메뉴

CASSIE'S BLOG

[비공개] 리액트 폴더 구조 본문

PROGRAMMING/React

[비공개] 리액트 폴더 구조

ITSCASSIE1107 2023. 9. 18. 16:41
반응형

 

 

 

퍼옴

UI디렉토리를 따로 빼서 슈퍼코딩 62강에서 

Table.js, BackwordCounter.js, ForwardCounter.js 이렇게 처리하길래 찾아본 정보 

출처: https://hyunwoo12.tistory.com/44

 

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

반응형

'PROGRAMMING > React' 카테고리의 다른 글

슈퍼코딩 복습 75강  (0) 2023.10.01
useEffect 훅  (1) 2023.10.01
리액트 개발환경 구축 0부터 (처음부터)  (0) 2023.09.05
[리액트 복습] 강의 별로 주요 포인트 정리한 것  (0) 2023.09.03
git remote update  (0) 2023.08.26