파일 구조를 정리해보자! - 리액트

수정하고자 하는 부분의 기능만 보고 바로 찾아가서 수정 할 수 있는 방법이 뭐가 있지 싶어서 고민하다가,
폴더로 역할 구분을 하여 쉽게 찾아가면 작업하는데에 더 효율적이지 않을까 해서 파일 구조를 변경하였다.

root
|- components
| |- common
| |- `pagename`
|- constants
|- hooks
|- layouts
|- pages
|- routes
|- store
|- theme
|- types
|- utils
|- vendor

• components - View를 담당하는 컴포넌트 파일 영역
• constants - 앱 전역에서 사용 할 상수 (변경되지 않음) 파일 영역
• hooks (container) - API제어, 상태, store 등 view가 아닌 데이터를 관장하는 파일 영역
• layouts - 레이아웃 파일 영역
• pages - 각 페이지의 파일 영역
• routes - 앱 라우터 설정의 파일 영역
• store - store(redux) 의 파일 영역
• theme - 앱 전역에서 사용 할 테마 파일 영역
• types - 앱 전역에서 사용 할 타입 정의 영역
• utils - 앱 전역에서 사용 할 유틸리티 함수 정의 영역
• vendor - 외부 라이브러리 관련 영역

폴더명 -> 담당역할로 보고 구조를 나누고자 하였으며

로그인을 요청한다면 hooks 폴더의 login,
로그인 화면을 수정한다면 page/login/ 혹은
components/login/ 에서 수정하면 될 것이다.

역할을 분담하여 정리하니 현재 진행하고 있는 작업이 어떤 작업이냐에 따라
빠르게 수정할 수 있어서 좋았고, 다른 누군가와 같이 수정한다고 해도
인지하기 편할거란 기대가 된다.