[React] React Folder Structures

🏹 리액트를 사용해서 코드를 작성할 때 폴더구조를 어떻게 잡는 게 좋을지 궁금해서 찾아보게 되었다.

기존에 나눠봤던 폴더구조는 기껏해야 api, components, style을 나누어 보았는데 좀 더 나은 폴더구조를 배워보고 싶었다. 그리고  회사에서 오픈소스를 분석할 일이 있어서 하고 있는데 큰 프로젝트다 보니 폴더가 구조화되어있어서 그냥 무턱대고 읽기보단 구조를 알고 보면 더 잘 읽힐 거 같아서  블로그에 유튜브 강의 내용, 정돈된 글을 찾아서 정리해두려고 한다.

 

 

 

📂Assets Folder

- images, sounds, styling files..

: asset 폴더에는 이미지, 사운드파일, 공통되게 쓰이는 스타일 파일이 들어간다. 

스타일 파일은 관련 컴포넌트나 페이지에 넣어줄 수도 있다. 이건 개발자의 스타일에 따라 편한 방식으로 사용하면 된다. 

 

❔ 개인적의견으로는,, 스타일 코드는 관련 컴포넌트에 함께 넣어주는 게 더 편할 거 같음! 아니면 global styles 코드 관리하는 폴더를 따로 만들던지 하는 게 나을듯함. 

 

📂Layouts Folder

- header, footer, sidebar ..

: page layout과 관련된 컴포넌트를 넣어주는 폴더

 

📂Components Folder

- modals, buttons, inputs, loader...

:  여러 컴포넌트에서 반복적으로 사용되는 UI 구성요소들을 모아놓는 폴더

 

📂Pages Folder

- 경로와 관련된 파일들(route)

: 페이지 경로와 관련된 파일들 라우팅 처리되는 파일들

 

📂Routes Folder

-  모든 경로들? 모든 유형의 경로 파일로 이뤄져 있고 하위 경로들을 호출할 수도 있는 폴더

❔ 어떤 의미인지 잘 모르겠음. 소스코드 보면서 봐야 알 거 같음

 

📂Config Folder

- 환경변수를 저장하는 구성파일 관리하는 폴더

: 이 파일을 사용해서 다중 환경 구성을 설정할 수 있음

 

📂Utils Folder

- 반복적으로 사용되는 기능 관리하는 폴더

-  정규식 조건, 데이터 형식 등 일반적인 JS함수 또는 개체 등을 포함

 

 

참고: https://www.youtube.com/watch?v=XEO3mFvrDx0&t=1263s&ab_channel=PedroTech

https://www.xenonstack.com/insights/reactjs-project-structure

ReactJs Project Structure and Final folder | Boilerplate Setup

 

이 외에도 Auth, Helpers, Hooks 등으로 더 세분화해서 나눌 수도 있음.!( 나중에 필요할 때 다시 정리하려고 함)