[React] 리액트의 폴더구조

리액트 프로젝트를 시작할 때 폴더 구조를 어떻게 설계할지 고민하는 것은 매우 중요하다. 폴더 구조는 프로젝트의 유지보수성과 확장성을 결정짓는 핵심 요소다. 프로젝트의 규모와 복잡성에 따라 적합한 폴더 구조를 선택해야 하며, 이를 통해 코드 관리가 용이해지고 협업 효율성이 높아진다.

리액트는 특정한 폴더 구조를 강제하지 않지만, 일반적으로 기능별, 파일 유형별, 또는 페이지별로 파일을 그룹화하는 방식이 널리 사용된다. 올바른 폴더 구조는 코드 가독성을 높이고, 프로젝트가 커질수록 유지보수를 쉽게 만들어준다!

src/
├── assets/        # 이미지, CSS, 폰트 등 정적 파일 저장
├── components/    # 재사용 가능한 UI 컴포넌트 저장
├── hooks/         # 커스텀 React 훅 저장
├── pages/         # 페이지 단위 컴포넌트 저장
├── services/      # API 호출 및 비즈니스 로직 저장
├── utils/         # 유틸리티 함수 저장
├── styles/        # 전역 스타일 및 테마 저장
└── App.js         # 애플리케이션 진입점

src/

- 프로젝트의 핵심 소스 코드가 위치하는 루트 디렉토리다. 대부분의 폴더는 이 안에 위치하며, 프로젝트의 구조를 정의한다.

assets/

- 이미지, 아이콘, 폰트, CSS 파일 등 정적 파일을 저장한다.

components/

- 재사용 가능한 UI 컴포넌트를 저장한다. 컴포넌트 단위로 분리하여 스타일과 테스트 파일을 함께 관리할 수도 있다.

hooks/

- 커스텀 React 훅을 저장한다. 상태 관리나 공통 로직을 분리하여 재사용성을 높인다.

pages/

- 페이지 단위의 컴포넌트를 관리한다. 각 페이지는 독립적인 디렉토리로 관리하며, 해당 페이지와 관련된 로직을 포함한다.

services/

- API 호출 및 비즈니스 로직을 처리하는 코드를 저장한다. 서버와 통신하는 로직을 캡슐화하여 관리한다.

utils/

- 공통적으로 사용되는 유틸리티 함수들을 저장한다. 예: 날짜 포맷팅 함수, 숫자 계산 함수 등.

styles/

- 전역 스타일과 테마를 관리한다. CSS-in-JS 라이브러리를 사용하는 경우에도 테마 설정 파일 등을 포함할 수 있다.

layouts/

- 페이지의 공통 레이아웃(예: 헤더, 푸터, 사이드바)을 관리한다. 여러 페이지에서 동일한 레이아웃을 사용할 경우 중복 코드를 제거하는 역할을 한다.

lib/

- 외부 라이브러리를 래핑하거나 커스터마이징한 코드를 저장한다. 특정 라이브러리에 의존하는 코드를 한곳에 모아 관리한다.

stores/

- 전역 상태 관리(예: Redux, Zustand)를 위한 파일 저장한다. 상태 관리 라이브러리에 따라 디렉토리 구조가 달라질 수 있다.

---

💥 폴더 구조 설계 시 고려 사항

1️⃣ 프로젝트 규모와 복잡성에 맞게 설계한다.
2️⃣ 팀원들이 쉽게 이해하고 사용할 수 있도록 명확한 네이밍을 사용한다.
3️⃣ 중복 코드를 줄이고 재사용성을 높이는 방향으로 설계한다.
4️⃣ 필요에 따라 기능별로 폴더를 나눌 수도 있다(예: features).