Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 미국영어연음
- 비슬론지퍼
- 비리짐
- 핸드캐리쿠리어차이점
- 미니마카
- 지연환가료
- 엑셀드래그단축키
- 클린코드
- 40HQ컨테이너
- MERN스택
- 우레탄지퍼
- 헤이큐
- 요척합의
- TACKING
- 엑셀자동서식
- 고급영어단어
- 나일론지퍼
- 필터링후복사붙여넣기
- 암홀트롭
- 봉제용어
- AATCC
- 와끼
- 자켓실측
- 40HQ컨테이너40GP컨테이너차이
- 영어시간읽기
- Armhole Drop
- 엑셀필터복사붙여넣기
- 웹API
- WHATTIMEOFTHEDAY
- 슈퍼코딩
Archives
- Today
- Total
CASSIE'S BLOG
[비공개] 리액트 폴더 구조 본문
반응형
퍼옴
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 |