react 프로젝트 폴더 구조 잡기

https://velog.io/@sisofiy626/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0

https://cookinghoil.tistory.com/127

https://thinkforthink.tistory.com/373

내부 구조 자세한 예시 : https://ghoon99.tistory.com/46

recoil 파일 폴더 구조 : https://soobing.github.io/react/recoil-introduction/

참고 : recoil의 atom과 selector에 직접 접근하기보다는, 따로 커스텀 훅을 만들어서 그걸로 접근하게끔 하는게 권장된다고 함.

selector는 의미 있는 파일명으로 하나하나 따로 파일로 만들어두기

data source별로 폴더 분류하기(각 폴더 안에는 하나의 atom과 selector들과 hook들이 있음)

presentational component : api나 비즈니스 로직과 관련된 state를 포함하지 않아서 재사용이 가능한 컴포넌트

container component : presentational component의 반대

전체 구조

└─ src
 ├─ components
 ├─ containers
 ├─ assets 
 ├─ hooks (= hoc)
 ├─ pages
 ├─ constants
 ├─ config
 ├─ styles
 ├─ services (= apis)
 ├─ utils
 ├─ recoil
    └─ example
       ├─ atom.ts
       ├─ index.ts (atom과 selector들 export)
       ├─ withBlaBla.ts
 ├─ App.tsx
 └─ index.tsx

src/Router.tsx

CRA로 만든 앱에서는 필요함

Routes를 리턴하면 됨. 이 컴포넌트 내에 액세스 토큰같은 코드 넣어두면 좋은 듯

pages

여기 들어가는 라우트 컴포넌트 파일도 그냥 넣지말고, 폴더 하나 파서 거기에 컴포넌트 파일이랑 styled-components 파일 두기

components 내부

내부에 common 폴더랑 각 페이지 이름으로 된 폴더들이 있음

일단 페이지 별로 분류해두고, 공통으로 사용될 것 같다 싶으면 그때그때 common 폴더로 옮기자

components/
  common/
    Modal/
      (index.jsx)
      Modal.jsx <- 컴포넌트
      styles.js <- styled components 코드
      SubmitButton.jsx <- 모달 컴포넌트에서 사용되는 버튼 컴포넌트
      CloseButton.jsx <- 모달 컴포넌트에서 사용되는 버튼 컴포넌트
      CloseIcon.jsx <- CloseButton 컴포넌트에서 사용되는 아이콘 컴포넌트
    Button/
      ...
 출처 : https://thinkforthink.tistory.com/373

containers

api나 비즈니스 로직과 관련된 state가 포함된 컴포넌트 파일은 여기에 넣어두자. 네이밍은 ...Container 요런식으로

services (=apis)

apis/
  reservations/
    index.ts
    types.ts
  shops/
    index.ts
    types.ts

services는 작은 프로젝트에서는 요정도 depth 정도로만 폴더 구조 짜자

styles

글로벌 스타일, theme 등 넣어두자