[React] 리액트 프로젝트시 칭찬받는 폴더 구조?

일단 기본적으로 리액트는 컴포넌트 기반의 프로그래밍 언어이다. 컴포넌트는 재사용 가능한 요소들이며 이런 재사용성을 이용해 효율적인 프로젝트를 만들수 있다고 한다.

 

그렇다면서 리액트 프로젝트시 어떻게 하면 효율적으로 컴포넌트들을 효율적으로 재사용할수 있을까? 🤔

프론트엔드 부트캠프를 진행하면서 리액트 초기세팅과 디렉토리 구조, 컴포넌트 구조 어떤게 더 보기 쉽고 효율적일지 궁금해져 정리해볼려고 한다!

 

CRA 초기 세팅 후 폴더 구조 🔍

vite로 react 프로젝트 생성시 기본 생성되는 폴더구조

• node_modules : 프로젝트의 모든 패키지들이 설치되는 디렉토리
• public: 정적 파일을 보관하는 폴더로, 빌드 시 파일들이 그대로 복사되어 빌드 결과물에 포함됨
• src/: 애플리케이션의 소스 코드를 보관하는 폴더
  
  • assets/: 애플리케이션에 사용하는 이미지, 아이콘, 폰트 등의 자원들을 보관하는 폴더
  • App.css: 컴포넌트의 스타일시트를 정의하는 파일
  • App.tsx: 애플리케이션의 루트 컴포넌트
  • index.css: 전역 스타일시트를 정의하는 파일
  • main.tsx: React 애플리케이션의 진입점 파일. ReactDOM을 사용하여 App.tsx 컴포넌트를 렌더링
  • vite-env.d.ts: Vite 환경을 위한 TypeScript 타입 정의 파일 
• eslintrc.cjs: ESLint 설정을 정의하는 파일. JavaScript 코드의 일관성과 품질을 유지하기 위한 도구로, 다양한 규칙을 설정하고 적용
• .gitignore: Git에서 추적되지 않을 파일 및 디렉토리를 지정하는 파일
• index.html: 애플리케이션의 HTML 템플릿 파일. main.tsx 파일이 여기서 포함되며, Vite는 이 파일을 기반으로 번들링을 수행함
• package.json: 프로젝트의 메타데이터의 의존성 정보를 포함하는 파일
• tsconfig.json: TypeScript 설정 파일. TypeScript 컴파일러가 이 파일을 참조하여 컴파일 옵션을 결정
• tsconfig.node.json: Node.js 관련 TypeScript 설정 파일. Vite 필드 프로세스와 관련된 설정이 포함될 수 있음
• vite.config.ts: Vite 설정 파일. 플로그인, 빌드 옵션, 서버 설정 등 Vite 와 관련된 모든 설정을 정의

---

 

프로젝트 초기 생성시 폴더구조에 대해 알아보았고 본격적으로 프로젝트시 주로 작업하게될 폴더인

src 폴더 안에 구조를 살펴보겠다!!

• assets
  • 이미지, 폰트, 아이콘 등 프로젝트에서 사용하는 정적 자산을 저장한다
  • 폴더로 나눠서 관리할 수도 있다. 예를 들어, /assets/images, /assets/fonts처럼.
• components
  • 재사용이 가능한 UI 컴포넌트들을 모아놓는 곳
  • 컴포넌트도 마찬가지로 폴더롤 세분화하여 관리할수 있다

• hooks
  • 커스텀 훅을 관리하는폴더
• services
  • api 호출 및 백엔드와의 통신 관련 로직을 처리하는 파일들을 모아놓음
  • API를 처리하는 모듈이나 외부 라이브러리와의 통합 로직을 이곳에 두면 로직이 깔끔하게 분리된다고 한다
• styles
  • 프로젝트 전역에서 사용하는 전역 스타일 파일이나 테마 파일을 저장
  • 스타일 관리 방식에 따라 CSS, Sass 파일 또는 스타일 컴포넌트 설정에 따라 달라질수 있다
• utills
  • 유틸리티 함수들을 모아놓는곳
  • 예를 들어 반복적으로 사용되는 로직 같은거(날짜 형식 변환 함수나 데이터 처리 함수) 등이 포함될 수 있다고 한다

 

이렇게 우리가 만든 컴포넌트들을 src/App.tsx에서 불러와 사용하게 되면,

src/main.tsx에서 App.tsx컴포넌트를 React DOM을 사용하며 렌더링하게된다.

최종적으로 vite는 main.tsx파일이 포함된 index.html파일을 기반으로 번들링을 수행합니다!

🤔 번들링 (Bundling)
여러 개의 파일(주로 JavaScript, CSS, 이미지 등)을 하나의 파일이나 여러 개의 파일로 병합하는 과정이다.
이 과정은 웹 애플리케이션을 배포할 때 자원을 효율적으로 관리하고, 로딩 속도를 최적화하기 위해 필수적인 단계이다.