[React] 폴더(디렉토리)의 구조

React 폴더 구조

프로젝트를 진행 시 크기가 커질수록 관리해야할 파일이 늘어나고
이에 따라 각 파일들을 용도에 맞게 분류해야 할 필요가 발생합니다.
(아래에서 조금 더 구체적으로 설명하도록 하겠습니다.)

CRA(Create React App)의 초기 폴더 구조

• node_modules :

  현재 프로젝트에 포함된 라이브러리들이 설치된 폴더이며 Git 같은
  저장소에 업로드를 할 때는 해당 폴더를 함께 업로드하지 않습니다.
  (프로젝트의 효율성을 높이고 저장소의 크기를 절약하기 위해서입니다!!)



• public :

  별도의 컴파일 과정이 필요하지 않은 정적 자산들이 있는 장소이며 파일 자체가
  변하지 않기 때문에 컴파일 없이 웹 서버를 통해 클라이언트에게 직접 제공됩니다.



• src :

  source(자원)의 약어이며 src 리액트의 주요 소스 코드가
  포함되는 폴더이고 이 폴더의 파일들은 JS로 컴파일 되는데
  주로 리액트의 컴포넌트와 로직을 작성하는 데에 사용됩니다.



• .gitignore :

  Git에 포함하고 싶지 않은 파일의 이름 혹은 폴더명 등을 입력하는 파일입니다.



• package-lock.json :

  해당 파일은 Node.js 프로젝트에서 의존성 관리와 관련된 정보를
  담고 있는 중요한 파일이며 'package.json' 파일과 함께 작업하면서
  npm(Node Package Manager)이 자동으로 생성합니다.



• package.json :

  프로젝트에 관련된 기본적인 내용(프로젝트명, 버전 등)과 라이브러리들의
  목록이 포함되어 있으며 라이브러리가 설치된 'node_modules' 대신에
  'package.json'을 깃에 포함하여 업로드하며 이후 누군가가 프로젝트를
  clone 할 때 해당 'package.json'에 작성된 라이브러리의 목록을 기준으로
  npm(Node Package Manager)에서 설치하게 됩니다.



• README.md :

  해당 파일은 Git과 같은 저장소에 업로드할 때
  프로젝트를 처음 접하는 사람들에게 프로젝트에 대한
  설명과 중요한 정보 같은 유용한 참고 자료를 제공합니다.

src(source) 내부 폴더 구조

• components :

  재사용 가능한 UI 컴포넌드들이 위치하는 폴더이며 컴포넌트란
  작은 UI 단위로 애플리케이션의 다양한 부분에서 재사용될 수 있습니다.



• assets :

  이미지와 폰트 같은 정적인 파일을 저장하는 폴더이며 위에서 언급 되었던
  'public' 폴더와의 차이점은 컴파일 시 필요 여부입니다. 웹사이트 로고를
  반영한 파비콘(Favorite Icon)과 같이 컴파일 단계에서 필요하지 않은
  파일들은 'public'에 반대로 컴포넌트 내에서 사용하는 이미지 파일인 경우
  해당 'assets' 폴더에 위치시켜야 합니다.



• hooks 또는 hoc :

  리액트의 'Hook'을 직접 구현한파일들이 위치하는 폴더이며
  hoc(Higher-Order Components)를 위치시키는 경우도 있고
  해당 폴더는 리액트의 기능을 재사용 가눙한 형태로 만들 때 유용합니다.



• pages :

  애플리케이션의 각 페이지를 구성하는 컴포넌트들이 위치하는
  폴더이며 라우팅을 통해 페이지를 전환할 때 사용됩니다.



• constants :

  애플리케이션의 공통적으로 사용되는 상수들을 정의한 파일들이 위치하며
  이러한 상수들은 코드의 가독성과 유지보수성을 높이는 데에 도움이 됩니다.



• config :

  애플리케이션의 설정 파일들이 위치하는 폴더이며
  여러 설정 파일이 있을 경우 해당 폴더에서 정리하여
  관리하고 설정 파일은 애플리케이션의 동작을 제어합니다.



• styles :

  CSS 파일들이 위치하는 폴더이며 스타일에 관련된 모든 파일을 한곳에 모아
  관리하며 글로벌(전역) 스타일이나 모듈화된 스타일 파일을 포함할 수 있습니다.



• services 또는 api :

  API 호출 및 관련 로직을 포함하는 파일들이 위치하는 폴더이며 데이터
  fetching 및 처리를 담당하고 인증과 관련된 로직이 포함될 수 있습니다.



• utils :

  공통적으로 사용되는 유틸리티 함수들이 위치하는 폴더이며 이러한 함수들은
  다양한 곳에서 재사용되고 코드의 재사용성과 관리의 편의성을 높입니다.



• contexts :

  context API를 사용할 때 관련 파일들이 위치하는 장소로 상태관리를 위해
  context API 대신 redux(상태 관리를 쉽게 할 수 있도록 도와주는 라이브러리)
  를 사용할 경우 폴더 이름을 store로 사용하기도 합니다.


• 위에서 설명한 폴더(디렉토리)들은 vscode를 기준으로 설명드리면
  단축키(ctrl + ~)를 입력 시 아래와 같은 통합 터미널 창이 나오고 해당 터미널 창에 'mkdir [폴더명]' 명령어를 입력해
  새로운 디렉토리를 추가할 수 있으며 아래의 사진에서 디렉토리 추가가 잘 되어진 것을 확인할 수 있습니다.

참고 블로그 주소