리액트 폴더 구조

오늘은 리액트 폴더 구조에 대해서 적어보려고 한다.

프로젝트를 진행하면서 폴더 구조는 떼놓을 수가 없는 중요한 부분이다.
어떻게 디자인을 하는지에 따라 유지보수, 확장성, 코드 재사용성 등 프로젝트 관리를 효율적으로 할 수 있도록 도와주기 때문이다.

**최상위 폴더 구조**

my-app
├── node_modules
├── public
├── src
├── .env
├── .gitignore
├── package.json
├── tailwind.config
└── README.md

node_modules
프로젝트에서 사용되는 외부 패키지 및 모듈이 설치되는 폴더입니다.

public
정적 파일을 저장하는 곳으로 HTML, 이미지, 폰트 등 여러가지 정적 자산들을 저장하는 폴더입니다.

src
"source"의 줄임말로 리액트 프로젝트에서 개발할 때 작성되는 소스 파일들로 구성되어 있다.

.gitignore
깃에 추적하지 않을 파일 및 폴더등을 지정하는 파일입니다.
예시) /node_modules, /.yarn, /build, .env.local 등

package.json
프로젝트의 구성 파일로 프로젝트 이름, 버전, 의존성, 스크립트를 정의하는 JSON 형식의 파일입니다.
이 파일은 프로젝트를 공유하고 협업할 때 중요하며, 파일에 명시된 라이브러리 목록을 기반으로 node_modules를 설치할 수 있도록 한다.

README.md
프로젝트에 대한 간단한 설명, 사용법, 라이선스 등의 정보를 제공하는 파일이다.
md는 마크다운(Markdown)의 약자로 일반 텍스트 기반의 경량 마크업 언어를 사용하여 작성된다.

**src 폴더 구조**

src
├── components
├── pages
├── styles
├── store
├── utils
├── hooks
└── App.js

components
리액트에서 UI를 작성하는데 핵심이 되는 폴더입니다.
재사용이 가능한 컴포넌트들을 모아두며, 코드들을 모듈화하고 유지보수성을 높이기 위해 사용된다.

pages
각각의 페이지를 구성하는 컴포넌트들을 모아두는 폴더입니다.
각 페이지 컴포넌트는 애플리케이션 내에서 특정 URL 경로에 대응되는 컴포넌트들이다.
예시) /Dashboard, /Home, /About 등

styles
스타일 관련 파일들을 모아두는 폴더입니다.
css modules, scss 등과 같은 스타일 관련 파일들을 관리합니다.

store
상태 관리를 위한 코드들을 모아두는 폴더입니다.
프로젝트를 관리하는 핵심 기능이며 Redux, ContextApi 등을 사용하여 구현 할 수 있다.

utils
재사용이 가능한 유틸리티 함수들이나 헬퍼 함수들을 모아두는 폴더입니다.
중복되는 코드들을 방지하며 컴포넌트 코드의 가독성을 향상 시킬 수 있습니다.

hooks
커스텀 훅들을 모아두는 폴더입니다.
프로젝트를 진행하며 자주 사용하는 로직을 커스텀 훅으로 추상화하여 재사용성을 높이고, 코드를 깔끔하게 유지 할 수 있습니다.

App.js
리액트의 최상위 컴포넌트로서, 애플리케이션의 전반적인 구조와 레이아웃을 정의하고 각 페이지 또는 컴포넌트들을 조합하여 화면을 구성하는 역할을 합니다.